【React Native 学习】mac 采用模拟器、真机调试

以 iOS 手机为例记录 RN 工程在模拟器、真机上的运行；

模拟器运行工程

安装 Xcode 时，会将 Simulator （iOS 模拟器）一并安装；也可通过 Xcode --> Window --> Devices and Simulators --> Simulartors 进行模拟器的管理；
采用模拟器运行工程比较简单，一句命令即可，可以通过系统的【终端】进入工程目录执行命令，也可在 WebStorm 内底部工具栏打开【Terminal】执行命令；

// 会启动默认模拟器运行工程
react-native run-ios

// 指定模拟器运行
react-native run-ios --simulator "模拟器的名字"

执行命令，本地会启动一个 RN 的本地服务，如下：

ReactNative.png

工程运行起来，修改 RN 代码，cmd + s 保存后，模拟器上的页面可实时刷新；

真机运行工程

将手机通过 usb 与电脑连接，然后如下命令即可安装工程：

// 1、通过“设备名称”运行
react-native run-ios --device "iPhone的名字"

// 2、通过“udid”运行
react-native run-ios --udid "iPhone的udid"

也可直接将如下 ios 目录下工程通过 xcode 打开，直接运行到真机上

ios_project.png

需要注意，真机调试需要将手机与电脑连接至同一局域网，并将 sourceURLForBridge 的地址设置为电脑的局域网ip；或者通过手机上RN页面摇一摇唤起调试工具，将代理设置为电脑的局域网ip；

坑：8081 端口被占用

在公司电脑上运行 RN 工程时，因 RN 默认的 8081 端口被安全软件占用，导致工程运行失败；
解决办法
（1）将 node_modules 目录下，所有文件中的 8081 端口改为了 8082；
（2）将 iOS 工程 targets->Build Phases --> Start Package 下的端口 8081 改为 8082；
（3）指定端口启动：react-native start --port 8082