react nativeの環境をexpoを利用して作成し、エミュレータで走らせつつ、ビルドして実機に入れるには的なお話

最近流行ってるだかよくわからないReact Native。
むしろ手を出しているところが少ないという印象というかなんというか。
けどiOSとAndroid両方作れるし、Javascript Bundleだしで意外と高速だし便利だし。

とりあえず環境を作るのが面倒とか色々とあるんだけど、
実はexpoでやってしまえば意外と簡単だよっていう感じではあったりする。

ってなわけで今日はexpoの導入からビルドおよびiOSのデプロイまで的なお話をば。

とりあえずの流れとしては下記。

1.node関連のインストール
　・npmもしくはyarnのインストール
　・wathmanのインストール
　・flowのインストール
2.エミュレータ関係のインストール
　・Xcodeのインストール
　・Android Studioのインストール
　・Genymotionをインストール
3.expo関連のインストール
　・expo XDEのインストール
　・expのインストール
4.適当に作ってみる
5.エミュレータで走らせてみる
6.各種デバイス上のexpoで走らせてみる
7.ビルドしてexpo上にバンドルファイルを置いてみる
8.iOSの実機でスタンドアローンアプリとして配布してみる
　・fastlaneのインストール

1.node関連のインストール

$ brew install node
$ brew install npm
$ brew install watchman
$ brew install flow

2.エミュレータ関係のインストール

・Xcode
・Android Studio
・Genymotion

■Genymotionの設定
・Genymotion > Settings > ADB > Use custom Android SDK toolsにAndroid StudioのSDKの場所を入れる
・適当にデバイスをダウンロード
・$ which adbをしたときのadbのシンボリックリンクを確認し、~/.expo/bin/adb/adbならばAndroid Studioのadbをシンボリックとして入れる

3.expo関連のインストール

・expo XDE

$ npm install -g exp
$ npm install -g react-devtools

4.適当に作ってみる

・expo XDEを開きデスクトップでもどこでも適当なところでプロジェクトを作成

5.エミュレータ上で走らせてみる

・expo XDEでDeviceをクリックし、Open on iOS SimulatorもしくはOpen on Android Simulator

Couldn't start project on Android: Error running adb: No Android device found. Please connect a device and follow the instructions here to enable USB debugging:
https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

■上記のエラー文が出て立ち上がらない場合
・Androidのエミュレータで走らせるには先にAndroidのエミュレータを立ち上げておく必要あり
・Genymotion -> デバイスを開く -> expo XDE -> Open on Android Simulatorの順番

Couldn't start project on Android: could not install *smartsocket* listener: cannot bind to 127.0.0.1:5037: Only one usage of each socket address (protocol/network address/port) is normally permitted. (10048) could not read ok from ADB Server * failed to start daemon * error: cannot connect to daemon

■上記のエラー文が出て立ち上がらない場合
・$ which adbをしたときのadbのシンボリックリンクを確認し、~/.expo/bin/adb/adbならばAndroid Studioのadbをシンボリックとして入れる

※Android Studioがなくてもできるっぽいけど、うまくいかなかったのでAndroid Studioを入れておくとよい

6.各種デバイス上のexpoで走らせてみる

・expo XDEでshareをおし、出てきたQRを各デバイスに入れたexpoから読み取る

7.ビルドしてexpo上にバンドルファイルを置いてみる

$ exp start //expo XDEを開いているならば必要なし
$ exp build:ios
...
$ exp build:status

・exp build:statusで完了してるかどうかを見れる
・完了してたらIPAなんちゃらかんちゃらというのが出てくる

8.iOSの実機でスタンドアローンアプリとして配布してみる

$ wget http://xxxxxxx -O /path/to/file/app.ipa

$ sudo gem install fastlane
$ PILOT_IPA="/path/to/file/app.ipa" fastlane pilot upload

・wgetで取得したIPAをフルパスでPILOT_IPAとして指定
・2FA(2段階認証)をAppleアカウントに設定しているとできないので、外す必要あり
・iTunesコネクトにいき、アプリ->TestFlight->バージョンから配布を開始

ってな感じ。
まだAndroidの実機配布とかそこらへんはやっていないけど大体こんな感じ。
react-native-cli使うとかだとなかなか面倒らしいんだけど、expoが色々と吸収してくれるから便利。
スプラッシュスクリーンだとかを変更したいとかだとデタッチとかする必要あるんだけど、それはまた今度的な。
ちなみに初期で作っているプロジェクトをベースに自分でテンプレートとか作るとかなり楽。

ってなわけでexpoを使うことで簡単にできるし、何より作っていてiOSもAndroidも爆速で作れるのがよい。
できたらブリッジとかバンドル立ち上げとかそういうことも経験していきたいと思うくらいreact nativeは面白い的なみたいな。