react-native iOS应用程序在部署后不显示静态资产(图像)

Question

我将所有静态图像放在项目根目录中名为"images"的文件夹中.但是,在我运行以下命令捆绑我的应用程序后,该应用程序可以正常工作,但没有显示图像.

我用来捆绑的命令:

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

请注意,资源文件夹已创建,它包含我的图像文件夹,所有图像都可以.

你能帮帮忙吗？

Answer 1

请先检查XCode控制台日志.你会发现应用程序无法在路径"{project name} .app/assets/resources/.."中找到这些特定的图像资产.

因此,与iOS原生应用程序不同,您需要将图像放在这些固定路径上.让我们将"assets"文件夹添加到"Copy Bundle Resources"中.

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

第2步

第3步

第4步

Answer 2

资产目标和mainbundle.js必须位于同一文件夹中.尝试:

./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脚本将bundle.jsbundle和bundler创建的assets文件夹复制到app包中.如果要手动部署程序包,则需要确保复制这些文件.最简单的方法是将main.jsbundle直接包含到项目中,并创建指向assets文件夹的文件夹链接.确认两者都显示在"构建阶段" - >"复制捆绑资源"中.

Answer 3

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

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

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

Answer 4

即使您正在使用newer Xcode versionsie12.x或更高版本，本地资源也不会加载。有两种解决方案：

1. 升级本机版本
2. 或转到以下文件：

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 你需要添加assets和main.jsbundle下Xcode -> build phases -> copy bundle resources

或者

使用库react-native-image-fix 这是链接尝试以下命令：

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

Rebuild the project.

Answer 5

对我来说，解决方案是运行命令来构建资产：

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