概要
アンドロイド(Android)開発する時やっぱりエミュレータで開発はきついですね。リアクトネイティブ(React Native)をアンドロイド用に開発する時エミュレータではなくアンドロイド(Android)デバイスでテストできるように設定してみます。リアクトネイティブ(React Native)をiOSデバイスでテストする方法が知りたい方は以前のブログiOSデバイステストを確認してください。
このブログはシリーズです。下記のブログも確認してください。
準備物
当然な話ですがリアクトネイティブ(React Native)プロジェクトをアンドロイド(Android)デバイスでテストするためには下記の準備物が必要です。
- アンドロイドスタジオ(Android Studio)
- アンドロイド(Android)デバイス
- リアクトネイティブ(React Native)プロジェクト
PCへリアクトネイティブ(React Native)開発環境を設定する方法が知りたい方は以前のブログRNインストルを参考してください。
アンドロイドデバイステスト
リアクトネイティブ(React Native)の公式サイトへリアクトネイティブ(React Native)をアンドロイド(Android)でテストする方法が詳しく載せています。それをみながらやってみましょう。
アンドロイドデバイス設定
使ってるアンドロイド(Android)デバイスの開発者オプションを有効化する必要があります。アンドロイド(Android)デバイスの設定 > デバイス情報のビルド番号を何回か押すと開発者オプションが有効化されます。
開発者オプションが有効化されたら、USBデバッグ機能を有効化する必要があります。設定 > 開発オプション > USBデバッグメニューを選択してUSBデバッグ機能を有効化させます。
アンドロイドデバイス接続
アンドロイド(Android)デバイスをUSBを使ってPCと接続します。アンドロイド(Android)デバイスでUSBでデバッグを許可するか聞かれたら許可してテストできる状態を作ります。
アンドロイドデバイスで実行
アンドロイド(Android)デバイスが接続された状態でアンドロイドスタジオ(Android Studio)を実行して左上のDebug appボタン(虫の上に矢印があるボタン)を押したらエミュレータ以外にも自分のデバイスが見えます。自分のデバイスを押してOKボタンを押したら開発したリアクトネイティブ(React Native)アプリが起動されることが確認できます。
注意：これはデバイスでテストするための実行です。したがって、エミュレータと同じようにPCへリアクトネイティブ(React Native)の開発サーバーが立ち上がってそのサーバーとデバイスが連動してテストが出来る仕組みです。したがって同じWifi/ネットワークの環境じゃないとデバイスがサーバーを見つかれないのでテストが出来ないです。
アンドロイド5.0バージョン以下
テストするデバイスがアンドロイド(Android)バージョン5.0以下の場合、別の設定をする必要があります。下記にある設定で私たちはアンドロイド4.4.2でリアクトネイティブ(React Native)プロジェクトを起動してテストしました。
リアクトネイティブ(React Native)プロジェクトフォルダでandroid/app/build.gradleファイルを下記のように修正します。
defaultConfig {
...
ndk {
// abiFilters "armeabi-v7a", "x86"
}
}
アンドロイドスタジオ(Android Studio)を開いてgradleをsyncボタンを押して同期化します。同期化が完了されたらリアクトネイティブ(React Native)プロジェクトを実行します。
react-native run-android
リアクトネイティブ(React Native)のサーバーがPCで実行されてデバイスにもアプリが上手くインストールされますが、赤画面のエラーが出ます。
デバイスを振って開発者メニュー(Developer Menu)を開きます。開発者メニューでDev Settings > Debug server host & port for deviceを選択します。IPアドレスとポート(Port)を入力する画面が出ます。そこに自分のIPと8081ポートを入力します。(ex> 10.0.1.1:8081)また開発者メニューへ戻ってReload JSを押してプロジェクトを再起動します。
完了
アンドロイド(Android)デバイスでリアクトネイティブ(React Native)を起動する方法を紹介しました。今からは実際のデバイスでテストしてみてください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
