ReactNativeのアプリ開発では、Expoを使って開発する方法があります。
Expoで開発をするメリット
・ビルドせずにシミュレータや実機で動作確認できる
・一つのソースコードでiOS, Androidアプリを作れる
・Xcode, Android Studioを使用せず、ストア申請までできる
・ビルド一回するだけで、”iTunes Store”と”Google Play”ストアに必要なファイル(iOSなら.ipaファイル, Androidなら.apkファイル)を生成してくれる。
Expoで開発をするデメリット
・ネイティブコードで作成されたライブラリ(ネイティブモジュール)を使うことができない
・アプリ内課金を実装することができない
などのExpoを使うことでのメリット、デメリットがあります。
Expoの環境構築
Expoでプロジェクトの環境構築する方法も2つあります。
新規プロジェクトを作成する時に、
expo init “アプリ名”のコマンドを実行すると、以下のように表示されると思います。
一般的に、Managed workflowの「blank」を選択してる方が多いと思います。
本記事では、もう一つの環境構築方法の
「Bare workflow」
について紹介していきます。
1. Bare workflowとは?
Bare workflowとは、
Expoの機能を使えたまま、ネイティブモジュール(iOSならSwiftやObjective-C, AndroidならJavaで書かれたコード)も使うことのできる環境構築方法です。
もう一つの環境構築方法である「Managed workflow」では、ネイティブコードで作られた機能を使うことができないですが、「Bare workflow」では、ネイティブコードの機能も実装することができます。
※ただし、「Bare workflow」では、Expoが提供している機能(Expo SDK API)においては、サポートされているものしか使えません。
カメラや、AbMob,プッシュ通知などの機能は、対応していますが、詳しくは以下の公式ドキュメントを確認してください。
↓Expoが提供している機能(Expo SDK API)↓
Expo SDK API
↓「Bare Workflow」でサポートされている機能↓
公式ドキュメント
なので、「どうしてもJavaScriptだけでは、機能が実装できなくて、Objective-CやSwiftで書かれたネイティブコードを使いたい」という方は、「Bare workflow」を使うことをおすすめします。
基本的にExpo環境でネイティブコードを使う予定がないと言う方は、「Managed workflow」を選択すれば、良いと思います。
2. Bare workflowで環境構築してみた
実際に「Bare workflow」で環境構築してみました。
expo init MyAppコマンドを実行し、MyAppプロジェクトを新規作成します。
今回は、”minimal”を選択し、環境構築します。
|
1 2 3 4 5 6 7 8 9 |
$ expo init MyApp ? Choose a template: (Use arrow keys) ----- Managed workflow ----- blank a minimal app as clean as an empty canvas blank (TypeScript) same as blank but with TypeScript configuration tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript ----- Bare workflow ----- ❯ minimal bare and minimal, just the essentials to get you started minimal (TypeScript) same as minimal but with TypeScript configuration |
2.1 フォルダ構成
プロジェクト作成後のフォルダ構成は、以下のようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
MyApp ├── __tests__ ├── android ├── App.js ├── app.json ├── babel.config.js ├── index.js ├── ios ├── metro.config.js ├── node_modules ├── package-lock.json └── package.json |
iosフォルダとandroidフォルダも生成されていることが確認できます。
app.json
app.jsonファイルに記載されている内容から、アイコンやスプラッシュ画像などは、expoの管理下から外れているみたいなので、Xcodeで設定する必要があるみたいです。|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "MyApp", "displayName": "MyApp", "expo": { "name": "MyApp", "slug": "MyApp", "version": "1.0.0", "assetBundlePatterns": [ "**/*" ] } } |
3. 動作確認
3.1 Expo Clientで動作確認
実際にExpo Clientを起動できるか確認してみたいと思います。
expo startを実行して、Expoを起動させます。
実行後、”Expo development tools”が立ち上がり、シミュレーションの動作確認もできました。
3.2 ネイティブ(Xcode)で動作確認
次にreact-native run-iosコマンドを実行して、動作確認したいと思います。
以下のようにreact-native run-iosコマンドを実行。
“MyApp.xcworkspace”ファイルが呼び出され、iPhone11のシミュレータが起動準備に入りました。
|
1 2 3 4 |
$ react-native run-ios info Found Xcode workspace "MyApp.xcworkspace" info Launching iPhone 11 (iOS 13.6) info Building (using "xcodebuild -workspace MyApp.xcworkspace -configuration Debug -scheme ・・・) |
こちらも実行後、起動するまで時間がかかりましたが、起動することができました。
結果、「Bare workflow」環境でExpoとネイティブでの両方で確認することができました。
3.3 expo build:iosコマンド
Expo環境では、
expo build:ios
コマンドを実行するだけで、iTunes Storeストアに必要な.ipaファイルを生成してくれるという便利なコマンドが用意されています。
そのコマンドが使用するできるのか、確認してみました。
実行後
expo build:ios コマンドを実行後、以下のような警告文が表示されました。⚠️ expo build:ios currently only supports managed workflow apps. If you proceed with this command, we can run the build for you but it will not include any custom native modules or changes that you have made to your local native projects.
Unless you are sure that you know what you are doing, we recommend aborting the build and doing a native release build through Xcode.
? Would you like to proceed? (Y/n)
翻訳
自分が何をしているのか確信が持てない限り、ビルドを中止し、Xcodeを介してネイティブリリースビルドを行うことをお勧めします。
？ 続行しますか？ （はい/いいえ）
この警告文について調べて見たところ、
公式ドキュメント
に
「App StoreとPlay Storeへのリリース
Expoビルドサービスは、ベアワークフローのビルドをまだサポートしていません。」
という記載が書いてありました。(現在：Expo SDKバージョン:38.0.0)
ということで、「Bare workflow」では、
expo build:ios
コマンドは使えないので、iOSの場合は”Xcode”、 Androidの場合は”Android Studio”でビルドする必要があります。
4. まとめ
以前の記事で、expo環境からejectして標準のReactNative環境に変換する方法について紹介しました。
ReactNativeのアプリ開発では、プロジェクトの作成方法が2つあります。 1. ReactNative CLI (標準) 2. expo CLI ReactNative CLIで開発をするメリット ・ネイティブコー …
Expo環境をejectすると、Expoの機能が使えなくなってしまい、作業効率が下がってしまいます。
なので、ejectする予定、ネイティブコードを使おうと思っている方は、「Bare workflow」で環境構築することをおすすめします(^^)
