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

怖くないexpo eject - TECH STAND #2

3aae47c11fab74b1db6ec80cd6f49058?s=47 takahi5
December 18, 2020

怖くないexpo eject - TECH STAND #2

3年ほどExpoのmanaged workflowで開発していたアプリをejectしてbare workflowへ移行しました。その際の苦労やeject後の運用についてご紹介します。

3aae47c11fab74b1db6ec80cd6f49058?s=128

takahi5

December 18, 2020
Tweet

Transcript

  1. 怖くない expo eject ワダタカヒコ @takahi5

  2. 和田崇彦(ワダタカヒコ) @takahi5 • フリーランス (1月にstand.fmジョイン予定!) • React NativeのUdemyコースを作っ たり

  3. 今日話すこと 3年運用したアプリをexpo ejectして Bare Workflowへ移行した話

  4. スポーツ観戦を楽しくするアプリ • リアルタイム実況 • 応援 • ギフティング SpoLive

  5. Expoあり?なし? expo init my-project npx react-native init myProject Expoあり Expoなし(Vanilla

    RN, 素のRN)
  6. iOS Android React Native Expo Expoあり (managed workflow)

  7. Expoのメリット (Managed workflow) • Expo Clientアプリによるスピーディな動作確認 (QRコードで起動) • OTAアップデート (apple審査なし)

    • クラウドビルド (XCode, Android Studio不要, プロビジョニング管理も)
  8. Expoのデメリット (Managed workflow) ネイティブコードを触れない Expoの提供してない機能は、実現できない (例) • 3rd party製のSDKの導入(広告計測など) •

    動画, 音声, bluetoothなどネイティブ寄りの実装 • アプリ内課金
  9. 要件を満たすならExpoがおすすめ (大半のアプリはExpoで足りそう)

  10. 途中でExpoでは満たせない要件が 追加になったら!?

  11. expo eject Expo (Managed Workflow) Expo (Bare Workflow) expo eject

    ネイティブコードも触れる!
  12. Expo Bare Workflowとは iOS Android React Native react-native-unimodule expo- camera

    expo- update expo- notification etc ...
  13. フォルダ階層 Managed Workflow Bare Workflow

  14. Expoあり?なし?(まとめ) expo init my-project npx react-native init myProject npx create-react-native-app

    my-project Expo (Managed Workflow) Expo (Bare Workflow) Vanilla RN (素のRN) eject +unimodule
  15. ↓ まともに起動しない expo eject

  16. ~元通り動かすためにやったこと~ 1. Bareに対応していないExpoモジュール • Googleログイン ◦ expo-google-app-authでなくexpo-google-sign-in • スプラッシュスクリーン ◦

    expo-app-loading でなく expo-splash-screen ...など https://docs.expo.io/bare/unimodules-full-list/
  17. ~元通り動かすためにやったこと~ 2. Constantsの読み込み import * as manifest from "app/app.json"; const

    apkKey = manifest.expo.extra.apiKey import Constants from 'expo-constants'; const apiKey = Constants.manifest.extra.apiKey Expo 40では不要!
  18. ~元通り動かすためにやったこと~ 3. 3rdパーティ製モジュールの改修 Bareに対応していない3rdパーティ製モジュール ↓ forkして修正したものを読み込み 例: expo-analytics

  19. ~元通り動かすためにやったこと~ 4. クレデンシャルなどの設定 Expo側で管理していたクレデンシャルやプッシュ通知のキー をダウンロードしてXCodeで設定

  20. Bare Workflowになって 変わったこと 変わらなかったこと

  21. Managed → Bareで変わったこと 変わった 変わらなかった OTA Push 通知 Expo Client

    SDK の更新 ビルド 方法 社内の 配布方法
  22. OTA ‍♂ Bareでも対応している (expo-update) Expo SDK 38〜

  23. Push通知 ‍♂ Bareでも対応している (expo-notification) Expo SDK 37〜

  24. Expo Clientはだいたい動く Managedで対応している機能は動く 非対応機能は分岐させる必要あり expo start react-native start

  25. Expo Clientを使うために... ManagedもしくはBareでしか使えない機能は分岐させる if (Constants.appOwnership === "expo") { // Expo

    Clientで起動した場合 // Managedのみの機能 } else { // Bareのみの機能 } https://docs.expo.io/bare/using-expo-client/
  26. SDKの更新 Expo SDKと別に、RN及びExpoパッケージを更新可能 SpoLiveではExpo SDKリリースのタイミングで更新している expo upgrade

  27. 社内配布 Before: QRコードでプルリクごとに配布 After: devのrelease channelを向けたビルドを社内に配布 release-channel=prod release-channel=stage ユーザー 社内

  28. まとめ • Bare Workflowも整備されてきた感 • なるべく最新のExpo SDKにしてからejectするのが⭕