React Native 双持的正确姿势

当他被「东邪」黄药师囚禁在桃花岛上时,竟能别出心裁,悟创出上乘武功「空明拳」以及「双手互搏术」

强行创造出来的需求

当运行一个React Native的应用时,React Native会首先启动一个默认端口为8081的Packager 服务,随后启动相应的模拟器应用,并于本地8081端口的服务进行数据交互。当调试单个应用的时候固然是好的(如果端口没有被占用的话),但是也有需要同时运行多个React Native应用的场景:

  • 多App间进行业务关联测试,如卖家App和买家App
  • 给领导和同事们演示的时候装逼

这时候就需要启动两个模拟器,在两个不同的端口运行Packager和应用。

启动两个模拟器

安卓应该不用多说了吧,创建两个不同的模拟器分别启动即可。这里只说明双iOS模拟器的启动。

  1. 进入XCode的开发者应用目录
    > cd /Applications/Xcode.app/Contents/Developer/Applications
    
  2. 打开第一个模拟器
    > open -n Simulator.app
    
    这是第一个默认型号浏览器会被打开。
  3. 打开第二个模拟器
    > open -n Simulator.app
    
    这时会跳出如下的报错窗口:

关闭窗口,从菜单栏依次选择Hardware -> Device -> iOSX.X -> 任意一个与第一个模拟不同的型号,即可打开第二个模拟器了。

启动两个Packager

这里我们可以使用react-native start --port <port_number>来指定Packager所监听的端口,从而启动两个监听不同端口的Packager:
QQ20170825-215131@2x

修改应用的Base端口

如欲在iOS模拟器上运行应用,则需用XCode打开ios/<name>.xcodeproj项目文件,并使用项目搜索功能找到包含8081的所有文件,将其改为任意其他端口号。

如欲在安卓模拟器上运行应用,则需在模拟器运行app后通过 CMD+M 打开调试菜单,选择Dev Settings -> Debug server host & port for device并输入localhost:<port_number>

运行应用

由于我们要将两个应用运行在两个不同的模拟器上,则需要在运行时指定模拟器以避免两个应用重复运行在了同一个模拟器上。
iOS:

> react-native run-ios --simulator "<modelID>"

安卓:

> react-native run-android --deviceId <device_id>

虽然React Native本身没有支持运行多个App的命令,但是自己捣鼓一番,也可以练就左右互搏之术!