メインコンテンツへスキップ

デバイスでの実行

アプリをユーザーにリリースする前に、実際のデバイスでテストすることは常に良い考えです。このドキュメントでは、React Native アプリをデバイスで実行し、本番環境に対応させるために必要な手順を説明します。

ヒント

プロジェクトの設定に create-expo-app を使用した場合、npm start を実行したときに表示される QR コードをスキャンすることで、Expo Go でデバイス上でアプリを実行できます。詳細については、Expo ガイドのデバイスでのプロジェクトの実行を参照してください。

Android デバイスでのアプリの実行​

開発 OS​

1. USB デバッグを有効にする​

ほとんどの Android デバイスは、デフォルトで Google Play からダウンロードしたアプリしかインストールして実行できません。開発中にアプリをインストールするには、デバイスで USB デバッグを有効にする必要があります。

デバイスで USB デバッグを有効にするには、まず、設定 → 端末情報 → ソフトウェア情報 に移動し、一番下の ビルド番号 の行を 7 回タップして、「開発者向けオプション」メニューを有効にする必要があります。その後、設定 → 開発者向けオプション に戻り、「USB デバッグ」を有効にできます。

2. USB 経由でデバイスを接続する​

次に、React Native プロジェクトを実行するための Android デバイスを設定しましょう。デバイスを USB 経由で開発マシンに接続します。

次に、lsusb を使用してメーカーコードを確認します (Mac の場合は、まずlsusb をインストールする必要があります)。lsusb は次のような出力をします。

bash
$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

これらの行は、現在マシンに接続されている USB デバイスを表しています。

お使いの携帯電話を表す行が必要です。疑問がある場合は、携帯電話のプラグを抜いて、もう一度コマンドを実行してみてください。

bash
$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

携帯電話を取り外した後、携帯電話のモデル (この場合は「Motorola PCS」) を含む行がリストから消えたことがわかります。これが私たちが注目する行です。

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

上記の行から、デバイス ID の最初の 4 桁を取得します。

22b8:2e76

この場合、22b8 です。これは Motorola の識別子です。

これを udev ルールに入力して、起動して実行できるようにする必要があります。

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

22b8 を上記のコマンドで取得した識別子に置き換えることを確認してください。

次に、adb devices を実行して、デバイスが ADB (Android Debug Bridge) に適切に接続されていることを確認します。

shell
$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

右の列に device と表示されていれば、デバイスが接続されています。一度に 1 つのデバイスのみを接続する 必要があります。

3. アプリを実行する​

プロジェクトのルートから、コマンドプロンプトに以下を入力して、デバイスにアプリをインストールして起動します。

shell
npm run android
注

「bridge configuration isn't available」エラーが発生した場合は、「adb reverse を使用する」を参照してください。

ヒント

React Native CLI を使用して release ビルドを生成して実行することもできます (例: プロジェクトのルートから yarn android --mode release)。

開発サーバーへの接続

開発マシンで実行されている開発サーバーに接続することで、デバイス上で迅速に反復処理することもできます。USB ケーブルまたは Wi-Fi ネットワークにアクセスできるかどうかに応じて、これを行う方法はいくつかあります。

この方法は、デバイスが Android 5.0 (Lollipop) 以降を実行しており、USB デバッグが有効になっており、USB 経由で開発マシンに接続されている場合に利用できます。

コマンドプロンプトで以下を実行します

shell
$ adb -s <device name> reverse tcp:8081 tcp:8081

デバイス名を見つけるには、次の adb コマンドを実行します。

shell
$ adb devices

これで、開発者メニューから Fast Refresh を有効にできます。JavaScript コードが変更されるたびにアプリがリロードされます。

方法 2: Wi-Fi 経由で接続する​

Wi-Fi 経由で開発サーバーに接続することもできます。まず、USB ケーブルを使用してデバイスにアプリをインストールする必要がありますが、一度インストールすれば、これらの手順に従ってワイヤレスでデバッグできます。進む前に、開発マシンの現在の IP アドレスが必要になります。

ターミナルを開き、/sbin/ifconfig と入力してマシンの IP アドレスを見つけます。

  1. ラップトップと携帯電話が 同じ Wi-Fi ネットワーク上にあることを確認してください。
  2. デバイスで React Native アプリを開きます。
  3. エラーの赤い画面が表示されます。これは問題ありません。次の手順で修正します。
  4. アプリ内開発者メニューを開きます。
  5. 開発者設定 → デバイスのデバッグサーバーホストとポート に移動します。
  6. マシンの IP アドレスとローカル開発サーバーのポートを入力します (例: 10.0.1.1:8081)。
  7. 開発者メニュー に戻り、JS をリロード を選択します。

これで、開発者メニューから Fast Refresh を有効にできます。JavaScript コードが変更されるたびにアプリがリロードされます。

本番環境用のアプリをビルドする​

React Native を使用して素晴らしいアプリを構築し、Play ストアでリリースする準備ができました。プロセスは他のネイティブ Android アプリと同じですが、いくつか追加の考慮事項があります。詳細については、署名付き APK の生成のガイドを参照してください。