如何在真实设备上捆绑和部署 React-Native iOS 应用答案

【问题标题】：How to bundle and deploy React-Native iOS app on real device如何在真实设备上捆绑和部署 React-Native iOS 应用
【发布时间】：2016-11-25 05:39:32
【问题描述】：

我找不到最新版本的 React-Native 文档，了解如何将应用程序捆绑和部署到实际设备上。

在我的 iPhone 上打开远程调试器时出现红屏错误，但应用程序在未启用远程调试器的情况下加载。

我没有更改AppDelegate.m 中的任何网址，rootBundle 仍然是@"index.ios"。

【问题讨论】：

错误说明了什么？

标签： javascript ios iphone reactjs react-native

【解决方案1】：

我自己是 RN 开发的初学者，在第一次尝试在真实设备上运行我的应用程序时也遇到了同样的问题。在这里，我想与大家分享一下我是如何成功实现它的：

首先，请确保您的 iPhone（或 iPad）已通过数据线连接到您的 Mac；
然后检查你的 Mac 和 iPhone 是否连接到同一个 Wi-Fi 网络；
然后是棘手的部分。如果您使用的是 RN ver 禁用 App Transport Security (ATS) 之类的东西。这是 iOS 9 中的一项安全功能，它将阻止智能手机上可能发生的任何未经授权的网络活动，以保持简单。可悲的是，ATS 将启动 RN 应用程序视为此类活动并阻止它。因此，您必须打开 Info.plist 文件并添加此代码，Facebook 团队已正式证明：
```
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
```
您可能想知道为什么您现在在文档中看不到它——好吧，据我所知，这是因为在 RN 0.30 版中，他们默认禁用了 ATS (you can read about it in the bottom of the page)
现在你需要打开你的 AppDelegate.m 文件并找到这一行：

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

取消注释，然后将其更改为如下所示： jsCodeLocation = [NSURL URLWithString:@"http://Your.Mac's_Ip.Address.Here:8081/index.ios.bundle?platform=ios&dev=true"];

像这样： jsCodeLocation = [NSURL URLWithString:@"http://255.255.255.255:8081/index.ios.bundle?platform=ios&dev=true"];
然后转到您的模拟器选择列表（idk 它是如何调用的，实际上，只需看看我的屏幕截图 :D ）并选择您连接的设备。

Xcode screenshot

然后点击“运行”就可以了！

但请记住，您可以通过两种方式在设备上运行应用。第一个选项（我在上面已经描述过）允许您在编辑器中编写代码，点击保存按钮，然后将重新加载手机上的应用程序以及您可以在模拟器中执行的所有操作，但是当您断开 iPhone 与您的 Mac，您将无法在您的设备上本地运行您的应用程序。

要使其在不连接 Wi-Fi 或 Mac 的情况下在本地工作，只需取消注释 OPTION 2 下编写的行（无需更改任何内容）。

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

之前的所有步骤都保持不变。

希望对你有帮助！

【讨论】：

【解决方案2】：

感谢 Monochrome 的回答，很有帮助！

我从第 4 步开始就遇到问题，我的 AppDelegate.m 文件看起来与您解释的不一样。

jsCodeLocation = [[RCTBundleURLProvider sharedSettings]      
jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"Kompas"
                                                  initialProperties:nil
                                                  launchOptions:launchOptions];

【讨论】：