ご注意
※以下は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のプロジェクトファイルを書き換えておく。
#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のコードを書き換えないといけないのが煩雑か。もっと簡単な方法があったら知りたいです。