以 iOS 手机为例记录 RN 工程在模拟器、真机上的运行;
模拟器运行工程
安装 Xcode 时,会将 Simulator (iOS 模拟器)一并安装;也可通过 Xcode --> Window --> Devices and Simulators --> Simulartors 进行模拟器的管理;
采用模拟器运行工程比较简单,一句命令即可,可以通过系统的【终端】进入工程目录执行命令,也可在 WebStorm 内底部工具栏打开【Terminal】执行命令;
// 会启动默认模拟器运行工程
react-native run-ios
// 指定模拟器运行
react-native run-ios --simulator "模拟器的名字"
执行命令,本地会启动一个 RN 的本地服务,如下:
工程运行起来,修改 RN 代码,cmd + s 保存后,模拟器上的页面可实时刷新;
真机运行工程
将手机通过 usb 与电脑连接,然后如下命令即可安装工程:
// 1、通过“设备名称”运行
react-native run-ios --device "iPhone的名字"
// 2、通过“udid”运行
react-native run-ios --udid "iPhone的udid"
也可直接将如下 ios 目录下工程通过 xcode 打开,直接运行到真机上
需要注意,真机调试需要将手机与电脑连接至同一局域网,并将 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