【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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容