无法为 React Native (iOS) 创建离线包

Posted 2023-03-15

【中文标题】无法为 React Native (iOS) 创建离线包

【英文标题】：Cannot create offline bundle for react native (iOS)

【发布时间】：2018-01-11 14:50:54

【问题描述】：

您好，我正在尝试使用以下代码为反应原生 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，应用程序通过本地开发服务器打开，如果我终止开发服务器，我将收到 Unhandled JS Exception 错误。对于 android，我尝试了以下步骤以使其正常工作。

mkdir android/app/src/main/assets 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 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

我能够在 iOS 目录中生成 ma​​in.jsbundle，然后按照以下步骤操作。

删除所有App Transport Security Settings 并在Info.plist 文件中添加Allow Arbitrary Loads(true)。

将运行编辑方案编辑为发布

从

更改了 jsCodeLocation

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

到

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

产品 -> 构建

执行上述步骤后，我收到以下错误

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

这是整个错误的截图

这是项目结构

当前版本：

反应：16.0.0 反应原生：0.51.0 Xcode:9.2

【问题讨论】：

可以看到由于Cannot find module /users/jeffreyrajan/Projects/React-Native，javascript构建失败。鉴于您的 JS 构建工作在开发模式下，这可能是 Babel 或 Metro 捆绑器无法正确解析模块路径的问题。你在使用任何自定义 Babel 插件或 Metro 转换器吗？

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

【参考方案1】：

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

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

一般来说，将目录和文件名限制为字母数字字符是一种很好的开发人员做法，因为许多 Unix 工具需要转义其他字符类型。

【讨论】：

非常感谢 @jevakallio 这帮助我解决了这个问题，但我仍然想知道为什么它适用于 Android。

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