いんでぃーづ

ゲームメインのブレブレブログ。ゲーム,Unity,デザイン,UI/UX

ReactNative : AndroidStudioでデバッグする方法

{スポンサーリンク}

ReactNativeはChromeデバッグする方法がメインなんですけど、ネイティブプラグインを含めた動作確認を AndroidStudio 上でやりたいよって思ったのでやりかたメモ。

環境:ReactNative 0.57

プロジェクトの用意

AndroidStudioで動かすための gradle ファイルとかが出力されている必要があるので、
react-native init コマンド でのプロジェクト作成が前提です。(Expo 使わない)

$ react-native init RNAndroid

AndroidStudio でプロジェクトを開く

AndroidStudio を起動します。

f:id:sugar_affordance:20181114171724p:plain

Open an existing Android Studio project をクリックし、 作成したプロジェクトの下に android というディレクトリが作成されているのでこれを選択して開きます。

Gradle が古いとか Build Tools のバージョンが合ってないとかいろいろ言われるかもしれませんが、今回の内容とあまり関係ないので割愛します。

とにかく頑張ってビルド通るようにしてください。

JSを端末から読み込むためのサーバを起動する

今回は実機で試します。

PCと端末をつないでデバッグ可能にしたら、ターミナルに戻り、プロジェクトのルートディレクトリで以下のコマンドを実行します。

$ adb reverse tcp:8081 tcp:8081
$ react-native start

これで node.js のサーバが立ち上がります。

なんのサーバかというと、ReactNativeの Javascript ファイル群をまとめ て(バンドルといいます)、端末で動いている アプリから読み込ませる ためのサーバです。

adb reverse は実機からPCのサーバにアクセスできるようにする呪文。

(react-native run-android することで、上記二つのコマンド実行とアプリ立ち上げまで実行されます)

これを立ち上げずに端末側でアプリを実行すると、赤い画面が表示されます。

AndroidStudio でデバッグ実行する

あとはAndroidStudioでブレークポイントを貼り、デバッグ実行するだけです。

f:id:sugar_affordance:20181114180817p:plain

アクセスに成功している場合、ターミナルに以下のようなロード状況が表示されます。

f:id:sugar_affordance:20181114181231j:plain

JSをリロードする

実機で動かしている場合、ターミナルで以下のコマンドを打ちます。

$ adb shell input keyevent 82

すると実機の画面にメニューが表示されるので、Reload を押しましょう。

Enable Live Reload を押すと、JSファイルを更新するたびに端末側でリロードが走るので便利。

f:id:sugar_affordance:20181114181258j:plain

Amazon.co.jpアソシエイト