React Native在真机运行(IOS)

前端之家收集整理的这篇文章主要介绍了React Native在真机运行(IOS)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

真机在线运行

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

需要修改的配置:

Bundle Identifier 修改为: com.soho3q

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

改完界面:

  • target处选择Test

修改如下:

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

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

打开Info.plist文件

值改为YES;

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

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

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

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

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

解决办法:

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

新增:

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

真机离线运行

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

  • 打开 RCTWebSocketExecutor.m 文件

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

  • 新建打包命令:
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中添加进去;

直接拖进去,

选择此项

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

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

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

猜你在找的React相关文章