͋ͷ਒͑ΔΠϯλϥΫγϣϯΛ࣮૷͍ͨ͠ 2019-07-03 React LTձ twitter: @nitaking_ github: nitaking

About ɾSatoshi Nitawaki ɾ೔ຊञ޷͖ΤϯδχΞ ɾReact Native, Node, TSͳͲ ɾ࠷ۙ͸OSS࡞ͬͯΈͨΓ

No content

෼͕มߋ͞ΕΔͨͼʹ খ͞ͳόΠϒ͕ൃੜ͢Δ ʢiOSͩͱTwitter͍͍ͶϘλϯԡͨ͠ͱ͖ͷ਒͑Ͱ͢ʣ

͜Εͳʹʁ

Haptic (Haptic Feedback) - ৮֮ϑΟʔυόοΫ

Haptic (Haptic Feedback) iOS 10(iPhone7)͔ΒOSʹAPI૷උ iPhone͸೔ৗతʹϙίϙί → iPhone 7 - 8ͷϗʔϜϘλϯ΋Hapticѻ͍͔ͳ Android͸ͨ·ʹ͔͠ϙίϙίಈ͔ͳ͍ → AndroidϢʔβʔʹ͸ׂͱ৽઱

Haptic (Haptic Feedback) ex) ɾtogglͷೖྗ࣌ؒมߋ ɾinstagramͷετʔϦʔ ϑΟϧλʔมߋ ɾϦετը໘ͷεϫΠϓμ΢ϯͯ͠ߋ৽ͨ͠ͱ͖ʢiosʣ ɾRNͷRefreshControlͷonRefresh࣌ʹios͸਒͑ͯͨ͸ͣ ɾappstoreͷΠϯετʔϧ׬ྃɺࣦഊʢiosʣ ɹɾجຊతʹiOSͷΤίγεςϜ಺͸਒͑·ͬͯ͘ΔΠϝʔδ

React NativeͰ࣮૷ͯ͠Έ͍ͨ

࣮૷ 1. RNͷඪ४Vibration • όΠϒ࣌ؒ୹ͨ͘͠Βߦ͚Δ͔ͱࢥͬͨΒͦΜͳ͜ͱ ͸ͳ͍ • ਺msecηοτˠʮϒʔʔϯʯ • ͜Ε͸ઈର͕ͪ͏

࣮૷ 2. expo-haptic • ໊લ͔Βͯ͠ຊ໋ • Expo APIͷͻͱͭ • ΋ͪΖΜexpoΞϓϦ͔Β͸͙͢ʹ࢖༻Ͱ͖Δ • ଞʹHapticܥϥΠϒϥϦ͸ଘࡏ͠ͳ͔ͬͨ

࣮૷ 2. expo-haptic • Haptic.selectionAsync() • Haptic.notificationAsync(NotificationFeedback) • success • warning • error • Haptic.impactAsync(ImpactFeedback) • light • medium • heavy • Asyncදهͷͳ͍method΋͋Γ·͕͢DeprecatedͰ͢

ૉͷRNͰ࢖͑ΔΜ͚ͩͬʁ

react-native-unimodules

react-native-unimodules • expo APIΛૉͷRNͰ΋࢖༻Մೳʹ͢Δ؀ڥΛఏڙ • ಋೖͷྲྀΕ 1. npm install react-native-unimodules 2. ΞϓϦͷ֤ػೳ΁ͷPermissionઃఆ
 
 ɾɾɾunimoduleΛinstallͯ͠࢖͏

ಋೖ • https://github.com/unimodules/react-native-unimodules • Android • android/settings.gradle มߋ • android/app/build.gradle มߋ • minSdkVersion ɿ16 → 21 • MainApplication.java มߋ • AndroidManifest.xml ʹ
 permission௥Ճ • ਌੾ʹDiff΋༻ҙ͞ΕͯΔͷͰ
 ಋೖ͸Θ͔Γ΍͍͢

ಋೖ • https://github.com/unimodules/react-native-unimodules • iOS • Podfile มߋ • AppDelegate.h มߋ • AppDelegate.m มߋ • Info.plist ʹpermission௥Ճ

react-native-unimodules • react-native-unimodulesͷpod install࣌ • ↓defaultͰ20ݸۙ͘unimodule͕install͞ΕͪΌ͏
 ΞϓϦαΠζΛҙࣝ͢ΔͳΒݸผʹignoreࢦఆΛͨ͠΄͏͕͍͍ɻʢެࣜࢀরʣ

Expo-haptics • ૉͷRNʹexpo-hapticsೖΕͯΈͨ • Ի੠͕ͳ͍ͱ·ͬͨ͘఻ΘΒͳ͍ͷͰɹ
 ޙ΄ͲπΠολʔʹΞοϓ͠·͢ʂ

ଞͷunimoduleͬͯͲΜͳͷ͕͋Δʁ

unimodules • expo-ads-admob • expo-ads-facebook • expo-analytics-amplitude • expo-analytics-segment • expo-app-auth • expo-app-loader-provider • expo-asset • expo-av • expo-background-fetch • expo-barcode-scanner • expo-blur • expo-brightness • expo-calendar • expo-camera • expo-constants • expo-contacts-flutter-plugin • expo-contacts • expo-crypto • expo-document-picker • expo-face-detector • expo-facebook • expo-file-system • expo-flutter-adapter • expo-font • expo-gl-cpp • expo-gl • expo-google-sign-in • expo-haptics • expo-image-manipulator • expo-image-picker • expo-in-app-purchases • expo-intent-launcher • expo-keep-awake • expo-linear-gradient • expo-local-authentication • expo-localization • expo-location • expo-mail-composer • expo-media-library • expo-module-scripts • expo-module-template • expo-payments-stripe • expo-permissions-flutter-plugin • expo-permissions • expo-print • expo-processing • expo-random • expo-secure-store • expo-sensors-flutter-plugin • …ʴ10ݸ͘Β͍ https://docs.expo.io/versions/latest/bare/unimodules-full-list/

Expo APIs • expo-ads-admob • expo-ads-facebook • expo-analytics-amplitude • expo-analytics-segment • expo-app-auth • expo-app-loader-provider • expo-asset • expo-av • expo-background-fetch • expo-barcode-scanner • expo-blur • expo-brightness • expo-calendar • expo-camera • expo-constants • expo-contacts-flutter-plugin • expo-contacts • expo-crypto • expo-document-picker • expo-face-detector • expo-facebook • expo-file-system • expo-flutter-adapter • expo-font • expo-gl-cpp • expo-gl • expo-google-sign-in • expo-haptics • expo-image-manipulator • expo-image-picker • expo-in-app-purchases • expo-intent-launcher • expo-keep-awake • expo-linear-gradient • expo-local-authentication • expo-localization • expo-location • expo-mail-composer • expo-media-library • expo-module-scripts • expo-module-template • expo-payments-stripe • expo-permissions-flutter-plugin • expo-permissions • expo-print • expo-processing • expo-random • expo-secure-store • expo-sensors-flutter-plugin • …ʴ10ݸ͘Β͍ ଟ͗͢ Flutter pluginͱ͔͋Δ ༏लͳunimodule͋Δ

• expo-face-detector • إೝࣝ • Ṗਫ਼౓ • ඍসΈ཰ͱΕΔ • ໨Λ։͍͍ͯΔ཰΋ • ਖ਼໘OK,ԣ޲͖ࣸਅNG
 ͷόϦσʔγϣϯ
 ʹ࢖͑Δʁ ྫ͑͹

expo͸ૉRNʹ ؔ܎ͷͳ͍࿩ͩͱࢥ͍ͬͯͨ

expoͷ༏लͳunimodules͸ ࣮͸ૉͷRNͰ΋࢖͑Δ

Enjoy RN dev!