create-react-native-app から eject してみた

React Native

create-react-native-app で作成したプロジェクトで eject してみました。

はじめに

React Native でアプリを作成する場合、create-react-native-app を使うと簡単にプロジェクトをセットアップできます。

しかし、いくつか制限があります：

  • ネイティブコードのモジュールは使用できない。
  • アプリファイル（AndroidならAPKファイル）を生成できない。
  • ローカルネットワークでしか実行できない。

そのため、これらのことを行いたい場合は「eject」する必要があります。

eject は npm run eject で実行でき、いくつか質問に答えると、プロジェクトが変換されて、上記の制限がなくなります。

プロジェクト形式は React Native 形式と ExpoKit 形式のどちらかを選択できますが、今回は React Native 形式で実行します。

React Native 形式では、react-native-cli で react-native init を実行したものと同じプロジェクト構成になります。

変換後は、Expo アプリでの実行はできなくなり、ネイティブコードのビルドを行って実機やエミュレーターで実行することになります。

そのため、ネイティブビルドができる環境を準備する必要があります。

eject の実際

実際に eject を実行してみると、以下のようになりました（React Native 0.47.0）：

$ npm run eject

> MyApp@0.1.0 eject /Users/user1/dev/MyApp
> react-native-scripts eject

We didn't find any uses of the Expo SDK in your project, so you should be fine to eject to
"Plain" React Native. (This check isn't very sophisticated, though.)

We strongly recommend that you read this document before you proceed:
  https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md

Ejecting is permanent! Please be careful with your selection.

? How would you like to eject from create-react-native-app? (Use arrow keys)
❯ React Native: I'd like a regular React Native project.
  ExpoKit: I'll create or log in with an Expo account to use React Native and
the Expo SDK.
  Cancel: I'll continue with my current project structure.

We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? MyApp
? What should your Android Studio and Xcode projects be called? (MyApp)
.....
Ejected successfully!
Please consider letting us know why you ejected in this survey:
  https://goo.gl/forms/iD6pl218r7fn9N0d2

各質問の意味です：

How would you like to eject from create-react-native-app?

変換後のプロジェクト形式を指定します。

What should your app appear as on a user’s home screen?

ユーザーに表示されるアプリの名称を指定します。

What should your Android Studio and Xcode projects be called?

ネイティブ側のプロジェクト名やパッケージ名になるようです。

com.MyApp の形式になるようなので、後で見直す必要があると思います。

実行

eject すると package.json にスクリプトが追加されるので、npm run android などでビルドと実行ができます。

Androidビルド時のエラー

Androidのビルド時に以下のエラーが出る場合があります：

A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

Android SDK の場所が指定されていないと、このエラーが出ます。

local.properties ファイルか環境変数 ANDROID_HOME で指定する必要がありますが、Android Studio でプロジェクトを作成した場合と同様に local.properties ファイルで指定するのがよさそうです。

.gitignore

eject では、.gitignore の面倒を見てくれないので、android と ios のディレクトリにファイルを配置する必要があります。