如何在 React Native 中显示动态命名的图像？

React Native 中的动态图像名称：使用 Image Require 模块

使用 React Native 时，Image 模块允许您显示图像在您的应用程序中。通常，可以使用 require('image!name-of-the-asset') 语法静态引用图像。

但是，在尝试使用动态图像名称时会出现一个常见问题。例如，如果您有一个表示图像名称的动态字符串，例如“avatar”，则以下代码将不起作用：

<Image source={require('image!' + 'avatar')} />

这将导致错误“需要未知模块”image!avatar "".

说明

根据React Native文档，静态资源必须使用前面提到的静态语法直接引用。不支持动态加载图片。

// Correct:
<Image source={require('image!my-icon')} />

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

替代方案

如果需要使用动态图片名称，可以将图片资源存储在单独的数组中或者对象，然后使用 Image 组件的 source 属性引用它们：

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

其他注意

对于 iOS，您必须记住将图像包含在 Xcode 项目内的资产目录中。这对于在 React Native 应用程序中正确引用图像是必要的。

以上是如何在 React Native 中显示动态命名的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！