だから何もしなくても勝手にクロスプラットフォーム対応！とは世の中そう上手くいきません。世知辛ぇよ。
だから先にiOSアプリをひと通り実装してから、いざAndroidアプリをビルドしてみると・・出るわ出るわエラーが笑
筆者がまさにそういうやり方でアプリ作っているので、Androidビルドで生まれた魑魅魍魎たちの退治記録を以下にまとめました。ご参照下さい。
Android SDK Build Tools revision 23.0.1 が必要と怒られる
RNのバージョンによって要求されるSDKも異なるかもしれません。
こんな風に怒られます：
> react-native run-android
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 3.994 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
という訳でインストールしてあげます。
以下でインストールできるsdkの一覧を取得する。
> android list sdk -a
リスト左の番号を-tオプションに指定してインストール：
> android update sdk -a -u -t 12
androidコマンドなんて無ぇよと言われる
SDKのバージョンが新しいと、androidコマンドを実行すると以下のように怒られます：
The android command is no longer available.
For manual SDK and AVD management, please use Android Studio.
For command-line tools, use tools/bin/sdkmanager and tools/bin/avdmanager
おとなしくAndroid Studioからインストールしてください。
Could not find com.android.support:design:25.0.1
気を取り直して再ビルド！
次は以下のように文句を言われます：
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)<home>
downloadRobolectricDependencies /Users/<home>/react-native-app/android/build/robolectric-dependencies
Download https://jcenter.bintray.com/com/aurelhubert/ahbottomnavigation/1.3.3/ahbottomnavigation-1.3.3.pom
Download https://jcenter.bintray.com/com/balysv/materialmenu/material-menu-toolbar/1.5.4/material-menu-toolbar-1.5.4.pom
Download https://jcenter.bintray.com/com/balysv/materialmenu/material-menu/1.5.4/material-menu-1.5.4.pom
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> A problem occurred configuring project ':react-native-navigation'.
> Could not resolve all dependencies for configuration ':react-native-navigation:_debugCompile'.
> Could not find com.android.support:design:25.0.1.
Searched in the following locations:
file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.pom
file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.jar
https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.pom
https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.jar
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.pom
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
Required by:
inkdrop:react-native-navigation:unspecified
> Could not find com.android.support:appcompat-v7:25.0.1.
Searched in the following locations:
file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
Required by:
inkdrop:react-native-navigation:unspecified
> Could not find com.android.support:appcompat-v7:25.0.1.
Searched in the following locations:
file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
Required by:
inkdrop:react-native-navigation:unspecified > com.facebook.react:react-native:0.39.2
> Could not find com.android.support:design:25.0.1.
Searched in the following locations:
file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.pom
file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.jar
https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.pom
https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.jar
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.pom
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
Required by:
inkdrop:react-native-navigation:unspecified > com.aurelhubert:ahbottomnavigation:1.3.3
> Could not find com.android.support:appcompat-v7:25.0.1.
Searched in the following locations:
file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
Required by:
inkdrop:react-native-navigation:unspecified > com.balysv.materialmenu:material-menu-toolbar:1.5.4
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 13.908 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
なげーんだよ！
要するに以下のライブラリが無い、と。
Could not find com.android.support:design:25.0.1.
Could not find com.android.support:appcompat-v7:25.0.1.
これはAndroid StudioでAndroid SDKを最新に更新してあげれば解決しました。
実際には以下のディレクトリにインストールされます。
ls -l ~/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/
total 2936
-rw-r--r-- 1 nora staff 261 Mar 15 10:18 appcompat-v7-25.0.1-javadoc.jar
-rw-r--r-- 1 nora staff 32 Mar 15 10:18 appcompat-v7-25.0.1-javadoc.jar.md5
-rw-r--r-- 1 nora staff 40 Mar 15 10:18 appcompat-v7-25.0.1-javadoc.jar.sha1
-rw-r--r-- 1 nora staff 445548 Mar 15 10:18 appcompat-v7-25.0.1-sources.jar
-rw-r--r-- 1 nora staff 32 Mar 15 10:18 appcompat-v7-25.0.1-sources.jar.md5
-rw-r--r-- 1 nora staff 40 Mar 15 10:18 appcompat-v7-25.0.1-sources.jar.sha1
-rw-r--r-- 1 nora staff 1012220 Mar 15 10:18 appcompat-v7-25.0.1.aar
-rw-r--r-- 1 nora staff 32 Mar 15 10:18 appcompat-v7-25.0.1.aar.md5
-rw-r--r-- 1 nora staff 40 Mar 15 10:18 appcompat-v7-25.0.1.aar.sha1
-rw-r--r-- 1 nora staff 1114 Mar 15 10:18 appcompat-v7-25.0.1.pom
-rw-r--r-- 1 nora staff 32 Mar 15 10:18 appcompat-v7-25.0.1.pom.md5
-rw-r--r-- 1 nora staff 40 Mar 15 10:18 appcompat-v7-25.0.1.pom.sha1
Cannot evaluate module react-native-webview-bridge : Configuration with name 'default' not found
エラー：
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> Cannot evaluate module react-native-webview-bridge : Configuration with name 'default' not found.
react-native-webview-bridgeは使っていないモジュール。リンクしたままだったので怒られた。
android/app/build.gradleから該当のcompileステートメントを削除。
自分の場合は以下のような感じ：
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 058d7a8..ce25205 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -132,7 +132,6 @@ dependencies {
compile project(':react-native-mixpanel')
compile project(':react-native-keychain')
compile project(':react-native-navigation')
- compile project(':react-native-webview-bridge')
compile project(':react-native-vector-icons')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
Android Emulatorが立ち上がらねぇ
バーチャルマシン一覧は以下のように取得：
> cd $ANDROID_HOME/tools
> emulator -list-avds
Android_ARMv7a
Android_Accelerated_x86
Nexus_5_API_25
いざ起動：
> emulator -avd Nexus_5_API_25
失敗しました。あああん？
> emulator -avd Pixel_API_25
emulator: WARNING: encryption is off
Hax is enabled
Hax ram_size 0x60000000
HAX is working and emulator runs in fast virt mode.
Failed to sync vcpu reg
Failed to sync vcpu reg
Failed to sync vcpu reg
Failed to sync HAX vcpu contextInternal error: Initial hax sync failed
DockerやVirtualBoxと併用できない
なんかそういう仕様らしいです。不便だ！
しょうがないのでDockerを終了する：
> launchctl list | grep 'VirtualBox|docker'
- 0 com.docker.helper
1241 0 com.docker.docker.37028
> launchctl stop com.docker.docker.37028
> docker ps -a
Error response from daemon: Bad response from Docker engine
> emulator -avd Pixel_API_25
emulator: WARNING: encryption is off
Hax is enabled
Hax ram_size 0x60000000
HAX is working and emulator runs in fast virt mode.
Got it working!!!!!!!! haha!!!
エラーの果てに得たもの
それは祝福の起動画面。
起動直後に落ちる
配信されたアプリを起動するとすぐにクラッシュしてしまう。
クラッシュレポートも上がってこないから、何が起こったのか分からない。
まるでProvisioning Profileの有効期限が切れた時のような挙動。
しかし、Code SigningやProvisioning Profileの設定は正しい。
そもそも間違っていればTestFlightで配信できないから。
原因1: ダイナミックなクラス名参照を実装している
以下の情報がヒントになった。
Production Buildでは、jsがminifyされる。
その過程で、クラス名もnとかfみたいな短い名前に変更されてしまう。
だから、Klass.constructor.nameのように参照している箇所は全て正しく動作しなくなる。
この実装方法は間違いなので修正する必要がある。
原因2: main.jsbundle が作成されていない
アーカイブの実行はエラー無く完了したから、コンパイル自体に問題は無いと思っていたが、そうではなかった。
アーカイブされたアプリの中身には、<name>.app 直下に main.jsbundle が作成されていなければならない。
このmain.jsbundleが、React Nativeのアプリ本体だ。
しかし何らかの理由でこのファイルがうまく作成されていなかった。
手動でコンパイルしてみる
react-native bundle というコマンドでXcodeを通さずに本番用のビルドが出来る。
以下の通り実行してみると予想通りエラーを得た。ちゃんとXcode上でもレポートしてくれよ・・
$ react-native bundle --entry-file index.ios.js --bundle-output build/out.js --assets-dest build/ --platform ios --dev false
[3/3/2017, 8:09:03 PM] <start> Initializing Packager
[3/3/2017, 8:09:03 PM] </start><start> Building in-memory fs for JavaScript
[3/3/2017, 8:09:03 PM] <end> Building in-memory fs for JavaScript (251ms)
[3/3/2017, 8:09:03 PM] <start> Building Haste Map
[3/3/2017, 8:09:04 PM] <end> Building Haste Map (932ms)
[3/3/2017, 8:09:04 PM] </end><end> Initializing Packager (1284ms)
[3/3/2017, 8:09:04 PM] <start> Transforming files
Unable to resolve module stream from /<path -to-app>/node_modules/pouchdb-quick-search/dist/pouchdb.quick-search.js: Module does not exist in the module map or in these directories:
/</path><path -to-app>/node_modules/pouchdb-quick-search/node_modules
, /</path><path -to-app>/node_modules
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
オーケー、どうやらpouchdb-quick-searchが悪さをしているようだ。
エラーメッセージよ、出来れば該当行番号も教えてくれ！！
pouchdb-quick-search の修正
これはアプリ固有の原因なので参考までにして頂きたい。
まずご存知の通りReact Nativeにはstreamというモジュールは存在しない。それはnode.jsの標準モジュールだ。
こいつをrequireしようとしているからbundleでコケているという訳だ。
だからその箇所を修正すればいい。
node_modules/pouchdb-quick-search/dist/pouchdb.quick-search.js:
23605 var Stream;
23606 (function () {
23607 try {
23608 Stream = require('st' + 'ream');
23609 } catch (_) {} finally {
23610 if (!Stream) Stream = require(86).EventEmitter;
23611 }
23612 })();
この require('st' + 'ream') という箇所が原因だった。なんだよ 'st' + 'ream' って。
grepしてもヒットしねぇわけだ！！
以上。
[amazonjs asin=”B01NBIIL2K” locale=”JP” title=”React Native Tutorial: How to Start with React Native. Beginners Guide Book (English Edition)”]
]]>