1

真机在线运行

  • 打开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

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


guanghua
2.7k 声望295 粉丝

喜欢摄影、健身的一个程序猿。