React Native 之 JS 分离
项目中遇到了要使 JS 与客户端分离的问题，即由前端开发人员开发相应的 JS 部分，客户端人员（Android 和 Ios）开发对应的 Native 部分。
不过幸运的是，React Native 对这部分内容已经做了支持。主要的思想是，当进入手机端的 RN 界面时，通过加载 JS 部分生成的 bundle，来达到 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 | Grio Blog 。
遇到的问题
64位手机不兼容的问题
这里可参照链接 Mixing 32- and 64-bit Dependencies in Android – Corbt blog 过滤掉 64 位的使用。
Could not get BatchedBridge
这个错误表示 RN 界面找不到需要加载的 js bundle，可以通过尝试以下几个途径去解决： 1. 进入 RN 的设置界面，在 Dev Setting 中 Debugging 中指定 Server 的地址和端口号。 2. 另外，需要确保手机端和 Server 端保证在同一个 WIFI 之下。
参考资料
- React Native Doc
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
