Expo detachから各シミュレーター起動まで

何をやったのか

Expoのv.24.0.0において、create-react-native-appで作ったアプリを$ exp detachしてシミュレーター起動までを一通りやって見た。

感想

予想以上に詰まった...
Expoは想像以上に、環境依存系のエラー対処が大変そう...
Expoを使っているみなさんの役に立ってくれれば...

実際の手順

1. detachする

基本的には、以下のコマンドでサクッと終わるはず

$ exp detach

注意点

• detachする際には、app.jsonには必須項目がある。 → 参考
• app.json中のandroidのpackage名には、ハイフンが使えない。

2. package.jsonの書き換え

package.json内のreact-nativeのモジュールを、expoのリポジトリ内にforkされているreact-nativeを使うように設定する。versionとかは、適宜直してください。

package.json

"dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz"
 }

この後に、以下のコマンドでnode_moduleを再インストールする。

$ rm -rf node_modules && yarn install 

参考: Not using the Expo fork of react-native

3. pod installする

以下のコマンドで終了のはずだったんだけど...

$ cd ios
$ pod setup
$ pod install
// install boost(1.59.0)がいつまでたっても終わらない

解決策
割とハマりどころのようで、expoやcreate-react-native-appのissueにも同様の相談があった。以下のページのQuick Fixのようにして、再度$ pod installするとインストールできるようになる。

以下のコマンドで、ローカルのboost.podspec.jsonを開く

 $ open ~/.cocoapods/repos/master/Specs/9/9/d/boost/1.59.0/boost.podspec.json

Urlを以下にしたがって変える

"source":{ 
  "http":"https://downloads.sourceforge.net/project/boost/boost/1.59.0/boost_1_59_0.tar.gz?r=&ts=1513105136&use_mirror=kent"
 },

参考: Quick Fix

4. iOSシミュレーターの立ち上げ

iOSは以下のコマンドで簡単に立ち上がった。

$ exp start
// 異なるタブで
$ react-native run-ios

5. Androidシミュレーターの立ち上げ

これも、当然以下で終わりのはず...

$ exp start
// 異なるタブで
$ react-native run-android

だったけどAndroid環境周りの色々なエラーに出会ったので、解決方法をメモ

Error①

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine java version from '9.0.1'.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Failed to notify project evaluation listener.
   > Could not initialize class com.android.sdklib.repository.AndroidSdkHandler

解決方法

• Javaのversionを8系に下げる。

参考: Java 9だとAndroidプロジェクトのGradleが立ち上がらない

Error②

FAILURE: Build failed with an exception.

* What went wrong:
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_HOMEの追加
• ダメなら、android/直下に、local.propertiesというファイルを作り、そこに以下のコードを追加

sdk.dir = /Users/USERNAME/Library/Android/sdk

参考: React Native android build failed. SDK location not found

Error③

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> You have not accepted the license agreements of the following SDK components:
  [Android SDK Build-Tools 26.0.1, Android SDK Platform 26].
  Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
  Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

解決方法

• 言われた通り、licenceに同意する

$ cd $ANDROID_HOME/tools/bin
$ cd ./sdkmanager --licenses
// 全てyes

参考: [You have not accepted the license agreements of the following SDK components
](参考
https://stackoverflow.com/questions/39760172/you-have-not-accepted-the-license-agreements-of-the-following-sdk-components)