React NativeのJS分離

プロジェクトでは、JSをクライアントから分離させるという問題が発生しました。即ち、先端開発者が相応のJS部分を開発し、クライアントスタッフ（AndroidとIos）が対応するNative部分を開発しました。
幸いなことに、React Nativeはこの部分をサポートしました。主な考えは、携帯端末のRNインターフェースに入るとき、JS部分で生成されたWindowsをロードすることによって、JSテスト開発の目的を達成することである。
先端開発にはnpm Serverを起動し、携帯端末のserverを接続することで開発が必要です。その過程をメモします。
1.JS部分を分離する
先端開発に必要なものはnpmのプロファイルpackage.jsonと対応するindexファイル（index.android.jsとindex.ios.js）だけです。
もちろん種類はやはり構成環境が必要であり、package.jsonファイルに従ってnpm installを実行すればよく、完了したら対応するnode_modulesディレクトリが生成される。また、インストールが必要なのは、react-native-cliのツールです。次のコマンドを実行します。

npm install -g react-native-cli

アップグレードが必要な場合は、以下のように実行します。

npm update react-native-cli -g

その後、Serverを起動する必要があるときは、indexファイルとnode_を含むmodulesディレクトリでは、以下のコマンドを実行します。

npm start

または次のようにします

react-native start

これにより、JSを提供するためのServerを起動することができる。
2.ドッキングデバッグ
JSのserverを起動したら、サービスに関する住所とポート情報をコマンドラインで確認します。携帯端末は、RNの内容をドッキングして起動した後、RNインターフェースの設定画面（メニューキーまたはパンで開く）でJS Serverのアドレスとポートを接続すればよい。また、Hot Loadingモードを有効にして、JSをリアルタイムでロードすることができます。
他のポートを指定すれば、次のコマンドが使えます。

react-native start --port 8088

3.指定ポート
もし本物のマシンでデバッグする必要があるなら、ポートの有効化に注意してください。

adb reverse tcp:8081 tcp:8081

ポートを変更する必要がある場合は、Android Tip：adb reverse Blogを参照しても良い。
遭遇した問題
1.64人の携帯は互換性のない問題です。
ここではMixing 32-and 64-bit Dependencies in Android-Corbt blogを参照して64桁の使用をフィルタリングします。
2.Could not get BatchedBridge
このエラーは、RNインターフェースがロードしたいjs bundleを見つけられないことを表しています。以下のいくつかの方法を試して解決できます。

はRNの設定画面に入り、Dev SettingでDebuggingにServerのアドレスとポート番号を指定する。

また、携帯端末とServer端末が同じWIFIの下にあることを確保する必要があります。

参考資料

React Native Doc