部署后,React原生iOS应用程序不显示静态/本地资产(图像)

gxwragnw  于 2023-02-05  发布在  React
关注(0)|答案(8)|浏览(154)

我把所有的静态图片都放在项目根目录下一个名为"images"的文件夹中,但是,在我运行下面的命令捆绑我的应用程序后,应用程序可以工作,但没有显示图片。
我用来捆绑的命令:

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

注意,assets文件夹已创建,其中包含所有图像的my images文件夹。
你能帮忙吗?

rm5edbpk

rm5edbpk1#

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

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

**步骤1:**选择XCode项目-〉构建阶段-〉复制捆绑包资源
步骤2

步骤3

步骤4

gzjq41n4

gzjq41n42#

资源目标和主.jsbundle必须位于同一文件夹中。请尝试:

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

无论如何,捆绑程序都会在其中创建一个assets文件夹。

更新,包括以下讨论中的信息:

在react-native-xcode.shXCode构建步骤中执行的www.example.com脚本将bundler创建的main.jsbundle和assets文件夹复制到应用程序包中。如果要手动部署包,则需要确保最简单的方法是将main.jsbundle直接包含到项目中,并创建一个指向assets文件夹的文件夹链接。验证这两个文件是否都显示在“构建阶段“-〉”复制捆绑资源“。

ds97pgxw

ds97pgxw3#

对于react-native的较新版本,请使用以下命令:

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

您将看到asset文件夹和ios文件夹中的main.jsbundle文件。然后转到Xcode-〉build phases-〉copy bundle resources,然后添加asset文件夹和main.jsbundle文件。不要忘记单击Copy if needed

oxf4rvwz

oxf4rvwz4#

即使您正在使用newer Xcode versions(即12.x或更高版本),也不会加载本地资源。对此有两种解决方案:
1.升级React Native版本
1.或转到以下文件:

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下添加assetsmain.jsbundle

使用库react-native-image-fixHere's the link尝试以下命令:

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

Rebuild the project.
9o685dep

9o685dep5#

  • ios目录中创建Assets文件夹。

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

  • Assets文件夹不会像在其他解决方案中那样显示在Copy Bundle Resources中。

  • 它将显示在Project Navigator中。它看起来与AWS文件夹不同,因为AWS添加为Create folder references

    • 测试日期**
  • react-native版本> 0.63

  • 一米一米一。

    • 注**
  • 解决方案(https://stackoverflow.com/a/53513935/1206052)我不想使用任何命令/脚本来强制它,因为捆绑是现成的。

  • 解决方案(https://stackoverflow.com/a/49457267/1206052)此解决方案对我不起作用。

qncylg1j

qncylg1j6#

对我来说,解决方案是运行以下命令来构建资产:

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

xeufq47z7#

以上所有问题都奏效了。
但要注意,在我的情况下,我不得不这样做的顺序:
1.先删除旧的资产文件夹(在ios/assets中)
1.将此添加到我的package.json中的scripts属性下(这样我就可以稍后运行它,或者为其他开发人员运行)

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

1.转到我的Xcode(我在v14.0.1上),到“构建阶段”选项卡,并添加我以前创建的“资产”文件夹。
1.在模拟器中删除我的应用程序
1.全新版本iOS(产品〉全新版本)
1.在我的项目的根目录下运行npm run build:ios

monwx1rj

monwx1rj8#

我将xcode版本从9.3更改为9.2时修复了该问题

相关问题