React Nativeをとりあえずすぐ実機で動かしてみる

← 1日目 centos7+nginx+php-fpm+php7な新しい感じの環境を構築

potproject.net Advent Calendar 20162日目の記事です。

---

とりあえずreact-nativeをすぐ使いたい記事。

環境は一つ前のMacBook Proです。

https://facebook.github.io/react-native/docs/getting-started.html

とりあえずはここに沿っているだけなのでこの記事見るよりこっちのほうがいいかも。 で、ハマったところを紹介していきます。 こういうの、あまり使ったことないと時間かかったりすると思うので。

brew install node
brew install watchman
npm install -g react-native-cli

Androidビルド

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Android SDKなんかがうまいこと設定されていればこれで準備OK。
丁寧にパスを通す方法も載ってます。やさしいですfacebook。
ちなみにANDROID_HOMEは通してなかった場合も結構あると思うので、ちゃんと通しましょう。
通さないとビルドに失敗します。ここもハマりポイント。

react-native init testreactnative
cd ./testreactnative
react-native run-android

testreactnativeというフォルダが作成され、テンプレ状態のものが作られるので、そのままビルド。 で、駄目。

A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1
BUILD FAILED

どうやら、現状はbuild tool 23.0.1でしか動かないっぽい。 つーか普通に書いてあったがな。単なる見落とし。 つか普通にbuild.gradleを変更すればできる気がしますが、素直に23.0.1を入れて再挑戦。

Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session

今度はなんだろう。インストールに失敗した模様。ちゃんとUSBデバッグもやっているのだが・・・
と思ったらこれはOS特有問題で、MIUIのデフォルト設定の場合こうなるとのこと。
ちょうどMIUI8のredmi note 3 proを使っていました。
com.android.ddmlib.InstallException: Failed to establish session react-native

Developer OptionのTurn on MIUI optimizationをオフ。これは外部からのインストールを防ぐ機能なのですが、今回はそれが邪魔した模様。

他に、-bash: adb: command not foundとか出てたのでPATHが設定できてなかったという問題もありました。 後はAndroidもiOSも初回は起動しても表示に多少時間がかかる模様。早とちりだと見落とします。 まあいいや、次はiOSだ!

iOSビルド

react-native run-ios

iOSはXcodeの新しいものが入っている環境なら、問題なくエミュレータが立ち上がりました。
しかし、実機の場合はXcodeから実行しないと駄目なようです。
testreactnative/ios/testreactnative.xcodeprojをXcodeで開き、プロビジョニング設定後そのままRunすればOK。
特に詳しい設定もいらなそうです。ちょっと試すならこっちが楽ですね。

また時間があったら試してみます。ネタを続けるために次回に続く。

---

3日目→ Centos+nginxでLet's encrypt(certbot)導入と自動更新まで