Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-native-unimodulesのススメ

Yu Watanabe
September 03, 2019

 react-native-unimodulesのススメ

expoが開発しているreact-native-unimodules(bare workflow)についてのスライドです。
素のreact-nativeを使っている人でも使えるのでぜひ使ってほしいです。

Yu Watanabe

September 03, 2019
Tweet

More Decks by Yu Watanabe

Other Decks in Programming

Transcript

  1. ͸͡Ίʹ react-native-camera࢖ͬͯ·͔͢ʁ (Χϝϥίϯϙʔωϯτ) react-native-sensors࢖ͬͯ·͔͢ʁ (Ճ଎౓ͱ͔δϟΠϩͱ͔ͷηϯαʔ) react-native-permissions࢖ͬͯ·͔͢ʁ (ΧϝϥͳͲͷݖݶऔಘ) react-native-location࢖ͬͯ·͔͢ʁ (Ґஔ৘ใऔಘ) react-native-video࢖ͬͯ·͔͢ʁ

    (ϏσΦίϯϙʔωϯτ) react-native-audio࢖ͬͯ·͔͢ʁ (Ի࠶ੜίϯϙʔωϯτ) react-native-unimodulesʹશ෦ೖ͍ͬͯ·͢ react-native-unimodules࢖͍·͠ΐ͏ react-native-sqlite-storage࢖ͬͯ·͔͢ʁ (SQLiteΛѻ͏ύοέʔδ)
  2. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

    ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ٕज़ॻయ ϓογϡ௨஌αʔόຊ
  3. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 4໊(ΤϯδχΞ͸2ਓʹͳͬͨ)Ͱฏۉ೥ྸ30൒͹ͷձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸

    ࠷ۙফͨ͠ࣄۀ -> Weddy Weddy ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢ۂͰགྷͬͯಈըΛΞοϓ ▸ ࠓ࡞͍ͬͯΔࣄۀ ▸ μϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + firebase + TypeScript + NextJS
  4. લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(1) ʙEXPOͷಛ௃ʙ ▸ Xcode΍Android Studio͕ෆཁ ▸ JavaScriptͷΈͰReact NativeΞϓϦ͕࡞੒Մೳ ▸ ศརͳωΠςΟϒAPIΛExpo

    SDKͱͯ͠แׅͯ͠ϝϯςφϯε ▸ ΫϥΠΞϯτΞϓϦΛ࢖͏͜ͱͰ؆୯ʹ࣮ػ֬ೝ ▸ OTAͳͲศརͳػೳ΋౥ࡌ
  5. લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(2) ʙEXPOͷσϝϦοτʙ ▸ ωΠςΟϒػೳ͕͞ΘΕͳ͍ ▸ VideoϓϨΠϠʔΛΧελϚΠζ͍ͨ͠ ▸ Bluetoothʹؔ͢ΔΞϓϦΛ࡞Γ͍ͨ ▸ Repro΍AdjustͳͲ֎෦SDKΛಋೖͰ͖ͳ͍

    ▸ firebaseͷϑϧػೳʹରԠ͍ͯ͠ͳ͍ͳͲͳͲ ▸ όϯυϧαΠζ͕େ͖͘ͳΓ͕ͪ ▸ react-nativeͷόʔδϣϯ௥ै͕ͪΐͬͱ஗͘ͳΓ͕ͪ ϝϦοτ΋σϝϦοτ΋͋Γ ࡞Γ͍ͨΞϓϦʹΑͬͯExpoΛ࢖͏͔Ͳ͏͔Λ൑அ Ejectͯ͠ExpoKitͰӡ༻͢Δ͜ͱͰ͜ΕΒ΋ଟগղܾʁ
  6. લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(3) ʙEXPOKITʹ͍ͭͯʙ ▸ Eject(Detach)Λͯ͠ExpoKitͱͯ͠ӡ༻͢Δͱʁ ▸ ωΠςΟϒػೳΛ৮Δ͜ͱ͕Մೳ ▸ podΛ͍͡ΔͳͲͯ͠όϯυϧαΠζ͸ଟগԼ͛ΕΔͳͲͳͲ ▸ όϯυϧαΠζΛେ෯ʹখ͘͢͞Δ͜ͱ͸ݫ͍͠

    ▸ react-nativeͷόʔδϣϯ͸Expo SDKͷ·· ▸ ಺෦తʹෳࡶͰ͋ΔͷͰɺॊೈʹมߋ͢Δ͜ͱ͕ݫ͍͠ ▸ ӡ༻ίετ͕ߴ͍ͷͰExpoKitͰ͋Δඞཁ΋ͳ͍ͷͰ͸ͳ͍͔ʁ ϞϊϦγοΫͳͨΊʹ৭ʑͱ੍໿͕ग़ͯ͠·͏ Ϟδϡʔϧʹ෼཭ͯ͠औͬͨΓ෇͚ͨΓͰ͖ΔΑ͏ʹ͠Α͏ -> react-native-unimodulesͷొ৔ ࢀߟɿIUUQTCMPHFYQPJPFYQPLJUFDCG
  7. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(2) ʙEXPOKITͱԿ͕ҧ͏ͷ͔ʁʙ ▸ Expo SDKʹґଘ͠ͳ͍ͷͰreact-nativeͷόʔδϣϯΛࣗ༝ʹมߋՄೳ ▸ ඞཁͳύοέʔδͷΈΛΠϯετʔϧͯ͠࢖༻Մೳ ▸ ૉͷreact-nativeϓϩδΣΫτʹ΋ޙ͔Β؆୯ʹಋೖՄೳ ▸

    OTAΞοϓσʔτͳͲҰ෦࢖༻Ͱ͖ͳ͍API͋Γ(ޙεϥΠυʹهड़) https://tech.kitchhike.com/entry/react-native-expo-session-01 expo init —template bare-minimumͰ؆୯ʹ࢖͑Δ
  8. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(3) ʙେ͖ͳಛ௃ʙ ▸ v0.5.0͔ΒExpoΫϥΠΞϯτͰ΋࣮ߦ͕Մೳʹ ▸ ݟͨ໨ͷ֬ೝ΍શମΛݟΔͷ͕ͱͯ΋؆୯ʹ ▸ ͨͩ͠ɺExpo SDKʹؚ·Ε͍ͯͳ͍ωΠςΟϒػೳ͸࢖͑ͳ͍ ▸

    firebaseͷϑϧػೳ / Repro / Adjust / ͳͲͳͲ ▸ JavaScript͚ͩΛExpoΫϥΠΞϯτͰ࣮ߦͯ͘͠ΕΔ .expo.jsͳͲʹมߋ͢Δ͜ͱͰผಡΈࠐΈՄೳ ৄ͍͠ྫ -> https://www.youtube.com/watch?v=FlZFsMnYuWg
  9. REACT-NATIVE-UNIMODULES͕αϙʔτ͍ͯ͠ΔAPI(1) ʙରԠࡁΈAPIʙ ▸ https://docs.expo.io/versions/v34.0.0/bare/unimodules-full-list/ ▸ ExpoͰ࢖༻Ͱ͖ΔAPI͓Αͼίϯϙʔωϯτ͕΄΅΄΅࢖༻Մೳ ▸ Expo͕؅ཧ͍ͯ͠ΔͷͰߋ৽΋ৗʹߦΘΕ͍ͯΔ ▸ طଘͷύοέʔδΛforkͯ͠؅ཧͯ͠Δ৔߹΋͋Δ(ΧϝϥͳͲ)

    Accelerometer 
 Admob 
 Amplitude 
 AppAuth 
 Asset 
 Audio 
 AV 
 BarCodeScanner 
 Barometer 
 Brightness 
 BlurView 
 Calendar 
 Camera 
 Constants 
 Contacts 
 Crypto
 DeviceMotion 
 DocumentPicker 
 Facebook 
 FaceDetector 
 FileSystem 
 Font 
 GLView 
 GoogleSignIn 
 Gyroscope 
 Haptics 
 ImageManipulator 
 ImagePicker 
 IntentLauncher 
 KeepAwake 
 LinearGradient 
 LocalAuthentication 
 Localization 
 Location 
 Magnetometer 
 MailComposer 
 MediaLibrary 
 Pedometer 
 Permissions 
 Print 
 Random 
 SecureStore 
 Segment 
 Sharing 
 SMS 
 SQLite 
 Video 
 VideoThumbnails 
 WebBrowser InAppPurchases react-native-unimodulesͷΈ InAppPurchases͕࢖༻Մೳ
  10. REACT-NATIVE-UNIMODULES͕αϙʔτ͍ͯ͠ΔAPI(2) ʙඇରԠAPIʙ AR AppLoading AuthSession BackgroundFetch ErrorRecovery Linking Notifications ScreenOrientation

    SplashScreen StoreReview TaskManager Updates ▸ ॱ൪͸ܾ·͍ͬͯͳ͍͕ͦΕͧΕରԠ༧ఆ ▸ ࢖͑ͳ͍ػೳ͸ଞͷnpmΛಡΈࠐΉͳͲͰରॲ Updates(OTAΞοϓσʔτ)ͷରԠ׬ྃޙʹ v1.0.0ͱͯ͠ਖ਼ࣜʹϦϦʔε༧ఆ
  11. ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(1) ʙΞϓϦ಺WEBϒϥ΢βʙ ▸ ϦϯΫΛ։͍ͨࡍʹWebViewΛදࣔ ▸ ϖʔδཤྺͳͲෳࡶͳػೳ͕ඞཁ ▸ ։ൃ͢Δίετ͕͔ͳΓߴ͍ ΞϓϦ಺Webϒϥ΢β ▸

    npmύοέʔδΛ࢖༻ ▸ ྆ରԠͰཁ݅Λຬͨ͢ύοέʔδ͕ͳ͍ ▸ iOS/AndroidͰ2ͭύοέʔδ͕ඞཁ ▸ ύοέʔδ؅ཧίετ͕ߴ͍ expo-web-browserͰ؆୯࣮૷
  12. Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ ▸ ExpoΛ࢖͍ͬͯΔ͕ɺͲ͏ͯ͠΋EjectΛ͠ͳ͍ͱ͍͚ͳ͘ͳͬͨਓ ▸ Χϝϥػೳ͚ͩվ଄͍ͨ͠৔߹ ▸ Repro΍AdjustͳͲΛೖΕͳ͍ͱ͍͚ͳ͍৔߹ ▸ ૉͷreact-nativeΛ࢖͍ͬͯΔਓ ▸

    ߋ৽͞Εͳ͍ύοέʔδ΋͋ͬͯ؅ཧ͕େม ▸ InAppPurchaseΛ࢖͍͍ͨ৔߹ ▸ ͍͖ͳΓExpoԽ͡Όͳͯ͘ஈ֊తʹߦ͍͖͍ͬͯͨ৔߹ ͱΓ͋͑ͣศརͳAPI/ίϯϙʔωϯτ܈ͩͱࢥͬͯ࢖ͬͯ΄͍͠