React Native在真机运行(IOS)

真机在线运行

  • 打开Xcode,open项目的ios目录;
如果之前在模拟器调试过,换成真机运行的时候务必关闭模拟器;

需要修改的配置:

clipboard.png

Bundle Identifier 修改为: com.soho3q

如果上来就运行的话,会报错:

clipboard.png

改完界面:

clipboard.png

  • target处选择Test

clipboard.png

修改如下:

clipboard.png

确认目标设备的系统版本一致:

clipboard.png

同样也要确认Tests测试用例项目下的配置:

clipboard.png

打开Info.plist文件;

clipboard.png

值改为YES;

打开AppDelegate.m文件;修改jsCodeLocation 的引用位置为我们添加进来的jsbundle;
修改为:

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"/main.ios" withExtension:@"jsbundle"];

目前为止配置的基本差不多了,这个时候可以点运行试试,但极有可能会出现以下错误:

clipboard.png

好像是类库导入的问题;
查看到报错的文件位置:

clipboard.png

是在测试用例下类库缺失;

解决办法:

  1. target选择测试;
  2. 找到Build Phases,新增资源库;

clipboard.png

新增:

clipboard.png

解决完上边问题,再次 CMD + R 运行,如果运行成功,即可在手机上看到模拟器运行时同样界面;

真机离线运行

离线运行需要打包后把jsbundle添加到项目中;同时,xcode中需要修改下配置;

  • 打开 RCTWebSocketExecutor.m 文件:

clipboard.png

文件中找到localhost,替换为你的IP;

clipboard.png

  • 新建打包命令:
react-native bundle --entry-file index.js --bundle-output ./ios/bundle/main.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

在ios目录下新建一个bundle文件夹,用于存放打包完的main.ios.jsbundle 和assets文件;

或者直接在package.json 中添加命令:

    "bundle-ios": "react-native bundle --entry-file index.js --bundle-output ./ios/bundle/main.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false"

接下来运行打包命令;

npm run bundle-ios

输出jsbudle后在Xcode中添加进去;

直接拖进去,

clipboard.png

选择此项

clipboard.png

再次运行,如果顺利,即可成功打一个离线包,装到手机上;

离线包模式下开启Chrome调试会很慢,甚至load不出来;所以可以打Release包;
具体设置: Product > Scheme > Edit Scheme
选择Relesase

clipboard.png

这种版本不会出现红屏报错;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值