react-native iOS 应用在部署后不显示静态/本地资产（图像）答案

【问题标题】：react-native iOS app not showing static/local assets (images) after deployingreact-native iOS 应用在部署后不显示静态/本地资产（图像）
【发布时间】：2016-05-23 03:41:38
【问题描述】：

我的所有静态图像都放在项目根目录中一个名为“images”的文件夹中。但是，在我运行以下命令来捆绑我的应用程序后，应用程序可以运行，但没有显示图像。

我用来捆绑的命令：

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

请注意，资产文件夹已创建，其中包含我的图片文件夹，所有图片均正常。

你能帮忙吗？

【问题讨论】：

您能否提供更多详细信息。模拟器还是设备？如果是设备，你是如何部署它的？能否请您发布一个您的图像用法的代码示例。
它发生在设备和模拟器上。
我做了什么来部署它：1）编辑模式以设置“发布”模式。 2）更改捆绑位置以使用本地主捆绑包（main.jsbundle） 3）执行上述命令捆绑应用程序。 4) 选择我的设备并运行它。
图片使用示例：

标签： ios deployment react-native

【解决方案1】：

在ios 目录中创建一个Assets 文件夹。

将此文件夹添加到您的项目中。
选择Create groups 选项。

Assets 文件夹不会像在其他解决方案中那样显示在 Copy Bundle Resources 中。
它将显示在Project Navigator。它看起来与AWS 文件夹不同，因为AWS 添加为Create folder references

测试于

react-native 版本> 0.63。
Xcode 12 and above。

注意

解决方案 (https://stackoverflow.com/a/53513935/1206052) 我不想使用任何命令/脚本来强制它，因为捆绑是开箱即用的。
解决方案 (https://stackoverflow.com/a/49457267/1206052) 这个解决方案对我不起作用。

【讨论】：

【解决方案2】：

即使您正在处理 newer Xcode versions 即 12.x 或更高版本，也不会加载本地资产。有两种解决方案：

升级 react-native 版本
或转到以下文件：

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m search for `if (_currentFrame)`

将以下 else 块添加到 if 块中，如下所示

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

如果是较旧的 xcode，您需要在 Xcode -> build phases -> copy bundle resources 下添加 assets 和 main.jsbundle

或

使用库 react-native-image-fix Here's the link 尝试以下命令：

npm install --save react-native-fix-image
npx react-native-fix-image

Rebuild the project.

【讨论】：

【解决方案3】：

资产目标和 main.jsbundle 必须在同一个文件夹中。试试：

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

无论如何，捆绑器都会在其中创建一个资产文件夹。

更新，包括来自以下讨论的信息：

在 XCode 构建步骤中执行的 react-native-xcode.sh 脚本将 main.jsbundle 和捆绑器创建的资产文件夹复制到应用程序包中。如果要手动部署包，则需要确保复制了这些文件。最简单的方法是将 main.jsbundle 直接包含到项目中，并创建指向 assets 文件夹的文件夹链接。验证两者都显示在“构建阶段”->“复制捆绑资源”中。

【讨论】：

可能是 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"release/main" withExtension:@"jsbundle"];您也可以尝试做 --bundle-output ./main.jsbundle --assets-dest 。关键是， require() 搜索相对于当前 main.jsbundl 的资产
抱歉没用。我认为问题在于捆绑包总是创建一个名为“assets”的文件夹并在其中复制“images”文件夹。
好的，终于开始工作了。你是对的，因为 assets 文件夹和 main.jsbundle 必须在同一个文件夹中。但是，当我将它们都放在默认 Images.xcassets 所在的同一目录中时，一切正常。此外，我在将资产文件夹和 main.jsbundle 添加到项目时选择了“创建文件夹引用”。这样，它们都出现在“构建阶段”->“复制捆绑资源”中，并且都按预期工作。谢谢。
是的，这对我有用。我错过了在“复制捆绑资源”构建阶段添加生成的资产文件夹（而不是单个文件）。
我添加了相同的，图像添加到捆绑资源中。静止图像未加载。我可以在资源中看到添加的图像和 main,jsbundle。

【解决方案4】：

对于较新版本的 react-native，请使用以下内容：

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

您将在ios 文件夹中看到asset 文件夹和main.jsbundle 文件。之后转到Xcode -> build phases -> copy bundle resources，然后添加asset 文件夹和main.jsbundle 文件。别忘了点击Copy if needed

【讨论】：

你使用的是哪个版本的 react-native？如果我没记错版本，此命令适用于 v0.55
仍然适用于 v0.62.2。 Tnx 求助，这个问题对我来说真的很烦人！

【解决方案5】：

我解决了将我的 xcode 版本从 9.3 更改为 9.2 的问题

【讨论】：

【解决方案6】：

请先检查 XCode 控制台日志。您会发现该应用无法找到路径“{project name}.app/assets/resources/..”上的那些特定图像资产

因此，您需要将图像放在那些固定路径上，这与 iOS 原生 App 不同。让我们将“assets”文件夹添加到“复制捆绑资源”中。

第 1 步： 选择 XCode 项目 -> 构建阶段 -> 复制捆绑资源

第 2 步

第 3 步

第 4 步

【讨论】：

嗨@SagarTrehan，我希望你完成这些步骤并相应地执行。您在执行时是否发现任何问题？
嗨@Milan，我多次遵循完全相同的步骤，但我仍然面临相同的问题，即图像未在 iOS 构建中加载。我正在使用 react-native 版本“0.59.10”，这个问题是否与最新的 react-native 相关？
@SagarTrehan，让我检查一下然后回来
它现在对我有用。我在“复制捆绑资源”中复制“$Project/src/assets”文件夹，而不是“$Project/ios/assets”。这是我的愚蠢错误。非常感谢您提供解决方案。
正如你所说，它对我有用，只需选择 ios 文件夹中的 assets 文件夹，然后将其添加到复制包资源中。