如何在 React Native 中动态加载图像，同时避免'需要未知模块”错误？

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

在 React Native 中，Image 组件预装了一个直观的 require 模块，允许开发人员轻松加载图像。对于静态图像，访问它们就像使用 require('image!avatar') 一样简单。但是，当尝试使用字符串插值方法 require('image!' 'avatar') 动态加载图像时，会出现错误：“需要未知模块”。

此行为是设计使然，如 React 中所述Native 的静态资源部分。通过文字文件名明确要求图像可确保代码库的稳定性和清晰度。尝试使用动态字符串插值会带来歧义和潜在的挑战。

动态图像引用的最佳实践

尽管不鼓励动态引用图像，但在某些情况下可能会出现这种情况有必要。为了适应这种情况，React Native 建议采用以下最佳实践：

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

通过显式将图标分配给包含所需图像的变量，代码可确保对静态资源的引用清晰一致。

Xcode 图像资源包含

需要注意的是，静态图像资源必须添加到 Xcode 中xcassets 包可以被 React Native 正确识别。确保考虑到这些图像以避免任何运行时问题。

参考文献：

• [React Native Image Module文档](http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets)

以上是如何在 React Native 中动态加载图像，同时避免'需要未知模块”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！