React Native + Expo のモバイルアプリ開発は強力で生産性がすばらしく高いものの、Expo で用意されている機能を超えて、ネイティブのモジュールをリンクしたいとなると Expo での開発が続けられなくなってしまいます。
その際、Expo のプロジェクトを eject すると、React Native のプロジェクトに変換され、ネイティブのモジュールをリンクすることができるようになります。
ただし、その代わりに Expo での高い生産性を手放すことになり、Expo のサポートが受けられなくなります。
ですので、Expo で開発するプロジェクトは、できるだけ Expo の範囲内で開発を行うべきです。
とはいえ、Expo の限界にぶつかった時どのような対処を行えばよいか知らないのでは、Expo の採用は難しいと思い Expo の eject の方法を調べたので解説します。
Expo プロジェクトの作成
まずは React Native + Expo でのプロジェクト作成方法を知らないと始まらないので、そこから解説します。なお、プロジェクトは TypeScript のプロジェクトとします。
expo init コマンドを実行すると、ウィザード形式でどのようなプロジェクトを作成するのか聞いてくるので回答していきます。
$ expo init ejectproject
template では blank (TypeScript) を選択します。
? Choose a template: ----- Managed workflow ----- blank minimal dependencies to run and an empty root component ❯ blank (TypeScript) same as blank but with TypeScript configuration tabs several example screens and tabs using react-navigation ----- Bare workflow ----- bare-minimum minimal setup for using unimodules
アプリケーションの表示名(name)を入力します。ここでは、eject projectと入力しました
? Please enter a few initial configuration values.
Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed
{
"expo": {
"name": "eject project",
"slug": "ejectproject"
}
}
Yarn の新しいバージョンが見つかったので、Yと答えてインストールしておきます。
? Yarn v1.17.3 found. Use Yarn to install dependencies? (Y/n) Y
これで設定は終了です。簡単ですね。
ここで、以下のコマンドを実行すると、ブラウザが起動して iOSのシミュレーター/Androidのエミュレーターで初期画面を表示できますが、ここではスキップします。
$ cd ejectproject $ yarn start
Expo プロジェクトを eject する
Expo プロジェクトは、eject することで React Native と同じになりますが、ExpoKit を使用することにより今まで開発したソースコードを無駄にしなくてすむようになります。
expo eject コマンドをプロジェクトディレクトリで実行すると、簡単に eject することができます。しかし、一度 eject したプロジェクトは元に戻せないので慎重に行ってください。
事前にフォルダ構成を確認しておきます。
$ ls
App.tsx assets node_modules tsconfig.json
app.json babel.config.js package.json yarn.lock
eject します。
$ expo eject
どのように eject するか聞いてくるので、ExpoKit を選択します。
? How would you like to eject your app? Read more: https://docs.expo.io/versions/latest/expokit/eject/ Bare: I'd like a bare React Native project. ❯ ExpoKit: I'll create or log in with an Expo account to use React Native and th e Expo SDK. Cancel: I'll continue with my current project structure.
iOSの識別名を聞いてくるので、ここでは ejectproject と回答しておきます。
? What would you like your iOS bundle identifier to be? ejectproject
Androidのパッケージ名を聞いてくるので、ここでは com.ejectproject としておきます。実際には正式なドメイン名を指定してください。
? What would you like your Android package name to be?
eject するのに Expoのアカウントが必要になります。ここでは既存のアカウントでログインしますが、アカウントがない場合はアカウントの作成を指定してください。
An Expo user account is required to proceed.
? How would you like to authenticate?
Make a new Expo account
❯ Log in with an existing Expo account
Cancel
以下のメッセージが作成されれば OK です。
Ejected successfully!
ここでディレクトリ構成を再確認すると、android と ios ディレクトリが追加されていることが分かります。
$ ls
App.tsx app.json babel.config.js node_modules tsconfig.json
android assets ios package.json yarn.lock
Expo サーバーの起動
iOS/Android のプロジェクトを実行する前に、Expo サーバーを起動しておく必要があります。また、Expo サーバーは開発中起動したままにしておきます。
$ expo start
iOS プロジェクトの実行まで
iOS プロジェクトをビルドして実行するには、Xcode と CocoaPods が必要になりますが、ここではすでにインストールされているものとして解説します。
プロジェクトのルートディレクトリから ios ディレクトリに移動して、pod をインストールします。
$ cd ios
$ pod install
Xcode でプロジェクトの *.xcworkspace ファイルを開きます。
プロジェクトをビルド＆実行します。
「▶」(Play)ボタンをクリックするだけですね。
すると、シミュレーターにアプリケーションがインストールされて起動されます。
この状態でプログラムを更新すると、自動でシミュレーターに反映されます。
Android プロジェクトの実行まで
Android プロジェクトをビルドして実行するには、Android Studio とエミュレーターのセットアップが必要になりますが、ここではすでに設定済みとして解説します。
Android Studio で android ディレクトリを開くと、gradle の設定に基づいて自動でライブラリがインストールされます。
その際、Gradle や他のビルドツールのアップグレードプロンプトが表示されますが、アップグレードはしないようにします。この理解であっていると思いますが、念のため公式の該当箇所を引用しておきます。
When opening the project, Android Studio may prompt you to upgrade the version of Gradle or other build tools, but don't do this as you may get unexpected results. ExpoKit always ships with the latest supported versions of all build tools.
プロジェクトの android ディレクトリ内で gradle のインストールタスクを実行します。
$ cd android
$ ./gradlew installDebug
Android のエミュレーターのアプリの中から、「eject project」をタップして起動します。
この状態でプログラムを更新すると、自動でエミュレーターに反映されます。
おわりに
React Native + Expo の情報は、日本語はもちろん英語も少ないです。
eject すると Expo の正規サポート対象外になるらしく、さらに情報が少なくなります。
この記事も試行錯誤を経てのものですが、参考になれば幸いです。
