无法为React Native（iOS）创建离线包

Question

您好，我正在尝试使用以下代码创建React Native iOS的离线包以进行测试：

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

在执行完这些步骤后，我尝试使用命令react-native run-ios --configuration=release运行应用程序，但是一旦完成，应用程序就会立即打开并崩溃。因此，这次我使用了react-native run-ios，这时应用程序将在本地开发服务器上打开，如果我终止开发服务器，则会出现未处理的JS异常错误。对于Android，我尝试了以下步骤来使其正常工作。

1. mkdir android/app/src/main/assets
2. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3. react-native run-android

即使我终止本地开发服务器，应用程序在Android上也可以正常工作。欢迎提供有关构建iOS离线包的任何帮助。 编辑1： 在使用命令进行iOS捆绑后，应用程序仍然无法在设备上运行。

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

I能够在iOS目录中生成main.jsbundle文件，并按照以下步骤操作：

1. 删除所有的App Transport Security设置，并在Info.plist文件中添加Allow Arbitrary Loads(true)。
2. 编辑Run Edit Scheme为Release。
3. 将jsCodeLocation从

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

修改为：

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

4. 产品 -> 构建

按照上述步骤操作后，我遇到了以下错误：

File /Users/jeffreyrajan/Library/Developer/Xcode/DerivedData/app_prod-fnewtufemaynsoedmhggmfjynoti/Build/Products/Release-iphonesimulator/app_prod.app/main.jsbundle does not exist. This must be a bug with
+ echo 'React Native

这是整个错误的截图。 这是项目结构。 当前版本：

- React: 16.0.0 - React Native: 0.51.0 - Xcode：9.2

- Jeffrey Rajan

---

你可以看到 JavaScript 构建失败，因为 Cannot find module /users/jeffreyrajan/Projects/React-Native。鉴于你的 JS 构建在开发模式下工作正常，这很可能是 Babel 或 Metro bundler 没有正确解析模块路径的问题。你是否使用了任何自定义的 Babel 插件或 Metro 转换器？ - jevakallio

不，@jevakallio，我没有使用任何自定义的Babel插件或Metro转换器，这只是一个带有默认代码的示例项目。 - Jeffrey Rajan

Answer 1

似乎构建脚本在运行捆绑器命令时没有正确处理文件路径中的空格字符。从您发布的截图中，我可以看到您项目的路径包含 React-Native Projects 目录中的空格字符。

如果您将该目录重命名为例如 React-Native-Projects，则归档构建将正常工作。

通常，对于许多Unix工具需要转义其他字符类型，因此限制目录和文件名只使用字母数字字符是良好的开发者实践。

- jevakallio

---

非常感谢@jevakallio，这帮助我解决了问题，但我仍然想知道为什么它在Android上有效。 - Jeffrey Rajan

问题并不在实际的Metro捆绑步骤中，而是在shell脚本xcodebuild用于调用bundler的过程中。在Android上，构建是作为Gradle任务完成的，因此不需要shell脚本。我已经提交了一个React Native的PR来解决这个问题：https://github.com/facebook/react-native/pull/17628 - jevakallio