如何在 React Native 的 Image Require 模块中动态加载图片？

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

在 React Native 中，Image Require 模块允许开发者将静态图像资源加载到他们的应用程序中。应用程序。虽然该模块可以完美地处理静态图像文件名，但动态图像名称通常会导致错误。

问题：

开发人员尝试使用动态字符串作为图像文件名:

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

但是，React Native 会抛出一个错误，指示未知模块，如图所示如下：

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

解决方案：

根据React Native文档的“静态资源”部分，图像名称必须在source属性中静态指定：

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

明确使用动态字符串作为图像文件名不鼓励：

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

相反，解决方案是利用条件渲染将静态图像文件名分配给变量：

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

其他注意事项：

• 静态图像资源必须添加到 Xcode 中的 xcassets 包中应用程序。
• 有关向 React Native 应用程序添加静态资源的更多信息，请访问 http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your -app-using-images-xcassets。

以上是如何在 React Native 的 Image Require 模块中动态加载图片？的详细内容。更多信息请关注PHP中文网其他相关文章！