React Native在真机运行（IOS）

jeyhan 发布于2019-08-22 16:22 / 806人阅读

摘要：真机在线运行打开，项目的目录如果之前在模拟器调试过，换成真机运行的时候务必关闭模拟器需要修改的配置修改为如果上来就运行的话，会报错改完界面处选择修改如下确认目标设备的系统版本一致同样也要确认测试用例项目下的配置打开文件值改为打开文件修改的引

真机在线运行

打开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"];

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

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

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

解决办法：

target选择测试；

找到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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94298.html

在真机和模拟器中使用 devtools 调试（iOS Web版）

摘要：谷歌和苹果分别提供了各自方案，来帮助开发者使用开发者工具调试真机或模式器的页面。这极大的提高了调试效率。本文介绍了苹果提供的在真机和模拟器中使用调试方法。真机调试一准备需要一台。需要一台在测试序列号中的手机。开发 Web 页面时，难免会碰到一些特定机型、特定版本或者是嵌到 App 中才会出现的问题。碰到这类问题时，如果不能使用开发者工具 devtools，这意味着，你只能使用 ale...

developerworks 2019-08-22 11:20 评论0 收藏0
ReactNative&weex&DeviceOne对比

摘要：平台要求基本都是以上需扩展不支持已支持。性能重心比较多，目前性能关注不多。成立也比较晚，案例也有一些，基本都是近一年内的案例。较晚，以公司自己人居多，成熟需一段时间。较晚，社区人相对少一些，内容相对成熟。　　React Native出来有一段时间了，国内的weex和deviceone是近期发布的，我可以说从2011年就开始关注快速开发的跨平台平台技术了，接触过phoneGap、数字天...

helloworldcoding 2019-08-21 10:56 评论0 收藏0
React Native基础&入门教程：调试React Native应用的一小步

摘要：这也成为了一些开发者跨入移动开发大门的第一道小门槛。目前已经知道了调试设置中和。 React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重...

NickZhou 2019-08-26 11:58 评论0 收藏0