React Native在真机运行(IOS)

真机在线运行

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

须要修改的配置:react

clipboard.png

Bundle Identifier 修改成: com.soho3qios

若是上来就运行的话,会报错:npm

clipboard.png

改完界面:json

clipboard.png

  • target处选择Test

clipboard.png

修改以下:react-native

clipboard.png

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

clipboard.png

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

clipboard.png

打开Info.plist文件;ui

clipboard.png

值改成YES;spa

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

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

相关文章
相关标签/搜索