React Native on Android device

React Native for Androidを実機で動かす.

  1. Run on device
  2. See Also

Run on device

まずUSB Debugging ModeをONにする.

するとAndroid端末を開発機にUSBで接続して、react-native run-androidを実行すると、 端末にApplicationのインストールが可能と起動が可能となる.

そしてこの真っ赤なエラー画面に遭遇して面食らう.

Error on device

なにが起こっているか.

index.android.bundlelocalhost:8081から取ってこようとして、接続できなくエラーとなっている. つまりbundleしたJavaScriptファイルを開発機から取ってこようとして失敗したと.

そのため開発サーバーに接続すれば良く、とりあえず2通りの方法がある.

Using adb reverse

adb reverseを使用して、端末のtcp:8081で開発機のtpc:8081を参照できるようにする.

adb reverse tcp:8081 tcp:8081

これだけで他の設定を変更することなく端末上でReload JSなどの開発オプションが使用できるようになる.

Configure device to connect to the dev server via Wi-Fi

端末のDev SettingsDebug server hostの設定を変更する. この方法で開発機に接続するためには端末と開発機が同じWi-Fiに接続している必要がある.

Applicationでmenuを表示する. (端末のメニューボタンを押すかApplicationを開いた状態で端末を振ると表示される.)

Dev SettingsDebug server host for deviceと遷移し、開発機のIPアドレスを入力する.
(OS XのIPアドレスはシステム環境設定ネットワークと遷移して、接続中のネットワークのタブで確認できる.)

すると端末上でReload JSなどの開発オプションが使用できるようになる.

See Also