React-Native图像在XCode 11.5升级后未显示

Question

我通常是这样显示图片的：

<Image source={require('../../assets/images/color/stuff.png')} />
<Image source={require('../some-other-path/picture.png')} />

在过去，我可以选择任意路径和文件夹。

然后，在发布之前，我会在“Build > Run”之前执行以下操作：

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

自从升级到XCode之后，每次进行release版本构建时，我的图片不再显示。在开发版本中，这些图片是可见的。 我尝试了--assets-dest ./some-folder，但结果仍然相同。 是什么导致了这种变化？

- TIMEX

---

请在问题中添加有关React Native的信息 - Muhammad Numan

Answer 1

解决方案 1：

在我这种情况下，我使用的是resizeMode='center'，当我从'center'更改为'contain'时，问题得到了解决。

解决方案 2：

1. 导航到项目目录 => ios => 创建文件夹 assets

2. 在assets文件夹中 => 创建与在项目中存储图像的文件夹相同的文件夹结构 (在我的情况下，我将所有图像保存在 app > src > assets > image中)，并将所有图像复制到此文件夹中
3. 打开Xcode => 选择项目目标 => Build Phases
4. 将我们创建的文件夹 assets 拖入 Copy Bundle Resources

5. 选择 Copy items if needed and press Finish

6. 清除项目并重新构建发布版本

完成！

PS: 如果您的图像名称为my_image.ios.jpg，则需要将它们重命名为my_image.jpg。

解决方案 3：

在Build Phases > Bundle React Native code and images中，将任何行替换为以下内容：

export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh

然后，在 Xcode 和文件夹中删除 main.jsbundle 文件，然后重新创建它：

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

接着，再次添加生成的main.jsbundle文件。然后清理、构建并重新运行该项目。

- Muhammad Numan

Answer 2

我在我的代码中处理的方式是在“src”目录下创建一个专门用于不同格式的单独模块，命名为“@types”。

所以以下这两个文件将位于“src/types”目录下。

png.d.ts

declare module '*.png' {
  const __pngImage__: unique symbol;
  const image: number & { __ext__: typeof __pngImage__ };
  export default image;
}

同样适用于jpg

jpg.d.ts

declare module '*.jpg' {
  const __jpgImage__: unique symbol;
  const image: number & { __ext__: typeof __jpgImage__ };
  export default image;
}

然后在组件中正常导入

import my_image from 'assets/images/my_image.png';

并像下面这样使用它

<View>
    <Image src = {my_image} />
</View>

- ASN