React-Native离线包 - 图片无法显示

Question

我有一个React-Native应用程序，我正在尝试以发布模式部署到手机上。我可以将应用程序捆绑到手机中。数据库、视频和音频文件都在其中，但是UI中没有显示任何图像。

我已经完成以下内容来“捆绑”我的应用程序：

1. 在项目文件夹中的终端中运行 react-native bundle --platfrom ios --dev false --entry-file index.ios.js --bundle-output main.jsbundle
2. 将对 main.jsbundle 文件的引用拖入 XCode 中的 myapp 文件夹下
3. 在 XCode 中打开 AppDelegate.m，取消注释 jsCodeLocation = [[NSBundle mainBundle]…
4. 打开 Product > Scheme > Edit Scheme，然后将 Build Configuration 更改为 Release
5. 在项目导航器下选择 myapp，然后： 在 TARGETS: myappTests > Build Phases > Link Binary With Libraries 下，按下 + 选择 Workspace > libReact.a 然后点击 Add

当我尝试在 XCode 中使用 ../node_modules/react-native/packager/react-native-xcode.sh 设置在 myapp > targets > myapp > Bundle React Native code and images 中编译时，会失败并显示 错误代码1。

我看到了很多相关帖子，我尝试了以下方法：

• 检查是否勾选了“仅在安装时运行脚本” - 然后应用程序会被安装但没有图像
• 将 source ~/.bash_profile 添加到 react-native-xcode.sh 中 - 应用程序构建失败

非常感谢任何帮助！

- scgough

---

我有同样的问题，你解决了吗？ - gray

目前还没有，但我的同事相当确定这与我的节点安装别名有关...我们需要进一步研究。他可以以相同的方式进行捆绑，一切正常。 - scgough

Answer 1

当生成bundle时，也要添加参数--assets-dest ./

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

这将生成main.jsbundle文件和Assets文件夹。在Xcode中右键单击添加文件到项目，并将main.jsbundle文件添加到项目中。还要拖放Assets文件夹并选择按引用创建（注意：不要选择创建组）。

我曾使用React 0.33， main.jsbundle使用的是assets（小写a）文件夹，但生成的文件夹是Assets（大写A）。我只需将生成的文件夹从“Assets”更改为“assets”，然后导入到Xcode中即可开始工作。

- Dinesh Sharma

---

显然，选择“按引用创建”而不是“创建组”确实有很大的区别。然后，您可以将“assets”文件夹作为一个整体添加到“Build Phases> Copy Bundle Resources”中，而不是每个单独的资产文件，这似乎会影响RN找到它们的能力。 - Silvain

同时拖拽资产文件夹并选择“按引用创建”（注意：不要选择“创建群组”）。(Y)(Y)(Y)(Y)(Y)(Y)(Y)(Y)(Y)(Y) - Zeeshan

对我来说没有运气。不确定为什么。以前我没有问题。 - JeremyF

Answer 2

图片是在Xcode还是文件系统中？我在您的捆绑参数中看不到--assets-dest。

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

将assets文件夹像bundle一样添加到xcode中。

请注意，只有在正确需要时，图像资源才会被复制，详见文档

- papacostas

---

谢谢！我会试一下的！ - scgough

这个命令的结果是：“未知选项'--minify'”，有什么想法吗？ - Moussawi7

@Moussawi7，现在已经将minify标志合并到-dev标志中了。--dev [布尔值] 如果为false，则禁用警告并对捆绑包进行缩小处理。 - papacostas

Answer 3

针对 iOS 14： 前往以下目录： node_modules/react-native/Libraries/Image 并打开 RCTUIImageViewAnimated.m 文件，然后在此部分添加 else 条件：

if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
[super displayLayer:layer];
}

- MehdiNasiriPoor

Answer 4

我将整个资产文件夹添加到“Build Phases > Copy Bundle Resources”中并运行以下命令：

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

希望对某人有所帮助。

- Fecoded

Answer 5

在你的React Native项目根目录下运行以下命令：

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

然后在XCode中将该文件夹添加到你的项目引用中。

- matt