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

デバイスでの実行

アプリをユーザーにリリースする前に、実際のデバイスでテストすることは常に良い考えです。このドキュメントでは、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 を実行して、デバイスがAndroid Debug Bridge (ADB)に正しく接続されていることを確認します。

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. お使いのノートPCとスマートフォンが同じWi-Fiネットワーク上にあることを確認してください。
  2. デバイスでReact Nativeアプリを開きます。
  3. エラーが表示された赤い画面が表示されます。これは問題ありません。次の手順で修正します。
  4. アプリ内の開発者メニューを開きます。
  5. Dev Settings → Debug server host & port for device に移動します。
  6. お使いのマシンのIPアドレスとローカル開発サーバーのポートを入力します（例：10.0.1.1:8081）。
  7. 開発者メニューに戻り、Reload JSを選択します。

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

本番用にアプリをビルドする​

React Nativeを使って素晴らしいアプリを構築し、いよいよPlay Storeでリリースしたくなりました。プロセスは他のネイティブAndroidアプリと同じですが、いくつか追加で考慮すべき点があります。詳細については、署名済みAPKの生成ガイドに従ってください。