【ReactNative】expo環境をReactNativeCLI環境へ変換(eject)する方法

ReactNativeのアプリ開発では、プロジェクトの作成方法が2つあります。

1. ReactNative CLI (標準)
 2. expo CLI
ReactNative CLIで開発をするメリット
 ・ネイティブコードで作成されたライブラリを使うことができる
・アプリ内課金を実装することができる
など

expo CLIで開発をするメリット
 ・ビルドせずにシミュレータや実機で動作確認できる
・一つのソースコードでiOS, Androidアプリを作れる
・Xcode, Android Studioを使用せず、ストア申請までできる
・ビルド一回するだけで、iTunes StoreとGoogle Playストアに必要なファイル(iOSなら.ipaファイル, Androidなら.apkファイル)を生成してくれる。
など

それぞれの特徴があり、アプリ開発を進めることができます。

本記事では、expo環境で開発を始めたけど 「ネイティブコードで作成されたライブラリを使いたい」、「アプリ内課金を実装したい」、「Xcodeを使いたい」とexpo環境からReactNative CLI環境に変換したいと思う方にexpo環境を「eject」する方法について解説していきます。


1. eject

Expo環境で npm run eject というコマンドを実行することで、expo環境をReactNative CLIのプロジェクト構成に変換することができ、ネイティブコードやアプリ内課金の機能が使えるようになります。

ただし、ejectすることによって、expo自体の機能が使えなくなり、ReactNative CLIと同様な開発方法で進めることになります。

2. コマンド実行

npm run eject コマンドを実行すると以下のように、いくつか質問に答えていきます。(一部省略して書いてます。)

$ npm run eject

(省略)

(※1)
Now we need to know your Android package (​https://expo.fyi/android-package​). You can change this in the future if you need to.

? What would you like your Android package to be named?

(※2)
Now we need to know your iOS bundle identifier (​https://expo.fyi/bundle-identifier​). You can change this in the future if you need to.

? What would you like your iOS bundle identifier to be?

(省略)

(※3)
⚠️ iOS configuration applied with warnings that should be fixed:
– supportsTablet: You will need to configure this in the “General” tab for your project target in Xcode.
– icon: This is the image that your app uses on your home screen, you will need to configure it manually.
– splash: This is the image that your app uses on the loading screen, we recommend installing and using expo-splash-screen. Details. (​https://github.com/expo/expo/blob/master/packages/expo-splash-screen/README.md​)

(省略)

(※)は、解説する為に書いたものですので、実際には、表示されません。


(※1) ？ Androidパッケージにどのような名前を付けますか？
(※2) ？ iOSバンドルIDをどのようにしますか？

と質問されますが、Enterを押せば自動的に設定することができます。
後から再設定できるので、後から設定するという方は、Enterを押せば良いと思います。


(※3)⚠️の警告文みたいなもの
要約すると、 expoプロジェクトでは、app.jsonファイルにアプリ申請に必要な情報(アイコン、スプラッシュ画像、バンドルIDなど)を記載すればよかったのですが、 ReactNative CLIの環境にejectしたので、「Xcodeでアイコンやスプラッシュ画像などの設定をしてください。」という警告文が表示されます(Androidも同様な警告文が表示されます)。


人によって質問や警告文の表示は異なると思いますが、このコマンド(npm run eject)を実行することで標準ReactNative環境へのejectは完了です。



3. eject完了後

プロジェクトフォルダに新しくiosフォルダとandroidフォルダが生成されます。

また、package.jsonファイルの中身も変更されており、プロジェクト実行コマンドが変わっています。
プロジェクトを実行する際は、以下のコマンドを実行します。

$ react-native run-ios iOSで起動します
$ react-native run-android Androidで起動します

ビルドをする場合は、Xcodeまたは、Android Studioで実行します。

4. 体験談(iOSアプリ開発)

実際に私がexpo環境をejectしたことによって、表示されたエラーについて紹介します。

プロジェクト起動時

eject後にプロジェクトを起動したら、以下のエラーが表示されました。

Invariant Violation: requireNativeComponent: “RNCSafeAreaProvider” was not found in the UIManager.

(翻訳)インバリアント違反：requireNativeComponent： “RNCSafeAreaProvider”がUIManagerに見つかりませんでした。

このエラーについて調べたところ、
expo環境を eject した場合や、Podfileを編集してポッドを追加、更新、または削除した時にpod install を実行 するみたいです。

pod installコマンドを実行しないと出るエラー表示みたいでした。

なので、プロジェクトを停止させた状態で以下のコマンドを実行します。
(または、iosフォルダ直下でpod installコマンドを実行)


コマンド実行後、プロジェクトを起動したら、無事にエラーが消えていました。

ビルド時

Xcodeでビルドをした時に、以下のエラーが表示されました。

library not found for 〜
Linker command failed with exit code 1 (use -v to see invocation)

(要約)ライブラリが見つかりませんのエラーが表示されビルドすることができません。

こちらについても調べたところ、管理ツールとして「CocoaPods」を導入している場合は、
Xcodeを開く際に、iOSフォルダ内にある「プロジェクト名.xcworkspace」の方で開かないとビルドできないみたいです。

「プロジェクト名.xcworkspace」でXcodeを開き直し、ビルドを試してみると、無事にビルドすることができました。



5. まとめ

今回は、Expo環境をejectする方法について紹介しました。 npm run ejectコマンドを実行するだけで、簡単に標準のReactNative環境に変換できるのは、ありがたいですね。