ご注意

※以下はReact Nativeの旧バージョンでの情報です。React Native最新版では使えないかもしれません。

はじめに

React Native開発において、iOSとAndroidの２つのシミュレータで同時にHot Reloadingを実行させる手順のメモ。

環境

React: 16.0.0-alpha.12
React Native: 0.46.2
NodeJS: 7.8.0
Xcode: 8.3.3
Android Studio: 2.3.3

背景

React Nativeで、iOS・Android共通のコードでUIを開発している時、それぞれのシミュレータで同時にコードの反映結果を確認したい。
例えば、自分がViewについて行った変更について、Android (or iOS)のみレイアウトが崩れることがないかどうかを簡単に知りたい。

React NativeにはHot Realodingという便利な仕組みがある。ところが以下のコマンドを順番に実行しただけでは、それが両OSのシミュレータで同時に実行されない（片方では動く）。

$ react-native run-android

$ react-native run-ios

以下の手順で、両OSのシミュレータで同時にHot Reloadingを実行することが出来た。

手順

Android

いつも通り、シミュレータを立ち上げ、以下のコマンドを実行する。
（ここで、packegerを実行するポートとして8081が使われる。）

$ react-native run-android

Androidのシミュレータにて、cmd + mで設定を呼び出す。Enable Hot Reloadingを選択し、ホットリロードを有効にする。

iOS

packegerを実行するポートとして、8082を使うことにする。
以下のように、iOSのプロジェクトファイルを書き換えておく。

AppDelegate.m

#if !(TARGET_IPHONE_SIMULATOR)
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#else
//  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8082/index.ios.bundle?platform=ios&dev=true"];
#endif

ポートを指定して、packagerを起動する。

$ react-native start --port=8082

Xcodeでシミュレータを選んで、cmd + rでRunする（ターミナルで$ react-native run-iosしても上手くいかず）。

iOSのシミュレータにて、cmd + ctr + zで設定を呼び出す。こちらもホットリロードを有効にする。

動作確認

React Nativeプロジェクトで適当なファイルの内容を変更し、ファイルを保存する。
iOSとAndroidそれぞれのシミュレータの画面で、"Hot Loading..."が表示され、即座に変更が反映されればOK。

さいごに

iOSのコードを書き換えないといけないのが煩雑か。もっと簡単な方法があったら知りたいです。

参考

Introducing Hot Reloading
React IOS & Android simultaneous device development · ethercreative/react-native-tips Wiki
iOS/Android simultaneously, live/hot reload... - React Discuss
react-native: hot-loading on two devices simultaneously in development - Stack Overflow