AndroidデバイスでReact Nativeアプリを実行する準備

仮想端末では無く物理的な端末と接続してReact Nativeのアプリを動かすための準備です。 やっぱり実際の端末で動かしたほうが確実ですので、設定しておくのがおすすめです。

UbuntuとAndroid端末を接続して、開発中のReact Nativeアプリを実機で動作確認します。

概要

• ドキュメント
• 端末側にてUSBデバッグを有効にする
• USBで端末と接続
• アプリを起動する

ドキュメント

https://facebook.github.io/react-native/docs/running-on-device
基本ドキュメント通りに進めます。ほぼ問題なくできるくらい簡単になっます。

端末側にてUSBデバッグを有効にする

スマホの設定画面から、ビルドBuild Numberを数回タップすることで開発者オプションを変更できるようになります。そこで、USBデバッグを有効にします。

USBで端末と接続

USBでPCと接続します。

製造元コードを確認

lsusbコマンドでmanufacturer code:製造元コードを確認します。
接続前と接続後で実行して、差分として出てくるものがスマホ端末のものです。

デバイスIDの先の4桁をメモしておきます。

udev rulesに追加

以下コマンドでudev rulesに追加します。
22b8の部分を先ほど取得したコードに書き換えて実行しましょう。

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

確認する

以下コマンドを実行するとdeveiceが追加されていることがわかります。

adb devices

アプリを起動する

ここまでで準備は完了です。

アプリのプロジェクトディレクトリに移動して以下コマンドを実行すれば、ビルドを行い端末でアプリが起動します。 エラーが出るようでしたら、環境変数のチェックなど確認してみましょう。

react-native run-android

以降アプリの更新を行いながら開発する場合は、development serverを起動させておくことでプログラムを更新します。 デフォルトのプロジェクトでは以下コマンドで起動できます。

react-native start

よくあるエラー

• port:8081にて通信するので,ファイアウォールの設定が必要になる場合が有る
  ufwなどのコマンドを使って設定しましょう。

• 仮想端末のバージョンによってはhttp 通信を受け付けない設定になっている
  android.manifestに設定を追加すれば通信が許可されます。 ローカルで通信に使うIPアドレスを調べて、ホワイトリストに入れて通信できるようにします。 端末側で表示されるエラー内にリクエストしているIPが出力されてますので確認しておきましょう。
  以下を/android/app/src/main/res/xml/network_security_config.xmlとして保存

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
  <domain-config cleartextTrafficPermitted="true">
  <domain includeSubdomains="true">localhost</domain>
  <domain includeSubdomains="true">10.0.2.2</domain> <!-- ← ここにローカルIPアドレス指定 -->
  </domain-config>
  </network-security-config>

  ./android⁩/app⁩/src⁩/main⁩/AndroidManifest.xmlに以下をします。

  <application
  android:networkSecurityConfig="@xml/network_security_config"> 
  </application>

おわりに

コチラも簡単にできます。躓く所としては端末側の設定か、環境変数などです。 エミュレータでの開発でも十分ですので、難しければそちらに頼りましょう。ただ実際の端末で動かすことができると確認がとても便利ですので実ビルドの前に一度は試しておきたいです。

他にエミュレータの起動等についても別の記事でまとめる予定です。