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

デバイスでの実行

ユーザーにリリースする前に、実際のデバイスでアプリをテストすることをお勧めします。このドキュメントでは、React Nativeアプリをデバイスで実行し、本番環境の準備を整えるために必要な手順を説明します。

情報

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

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

開発OS​

1. USB経由でのデバッグを有効にする​

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

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

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

それでは、Androidデバイスを設定してReact Nativeプロジェクトを実行しましょう。USB経由でデバイスを開発マシンに接続してください。

次に、lsusbを使用して製造元コードを確認します（Macでは、最初にlsusbをインストールする必要があります）。lsusbは次のような出力を生成します。

$ 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デバイスを表しています。

携帯電話を表す行が必要です。不明な場合は、携帯電話の接続を解除してコマンドを再実行してみてください。

$ 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ルールに入力する必要があります。

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）に正しく接続されていることを確認してください。

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

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

3. アプリを実行する​

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

npm run android

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

ヒント：React Native CLIを使用して、リリースビルドを生成して実行することもできます（例：プロジェクトのルートから：yarn android --mode release）。

開発サーバーへの接続

USBケーブルまたはWi-Fiネットワークのどちらにアクセスできるかによって、開発マシンで実行されている開発サーバーに接続して、デバイス上で迅速に反復処理することもできます。

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

コマンドプロンプトで次のコマンドを実行します。

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

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

$ adb devices

開発者メニューから高速リフレッシュを有効にできます。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を再読み込み**を選択します。

開発者メニューから高速リフレッシュを有効にできます。JavaScriptコードが変更されるたびに、アプリが再読み込みされます。

本番環境向けアプリのビルド​

React Nativeを使用して素晴らしいアプリを構築し、Playストアでリリースしたいと考えています。このプロセスは他のネイティブAndroidアプリと同じですが、考慮すべき点がいくつかあります。署名付きAPKの生成に関するガイドに従って、詳細をご確認ください。