如何在 React Native 中动态加载图像而不出现'需要未知模块”错误？

React Native 中的动态图像要求

使用 React Native 的 Image 模块时，需要考虑在需要使用动态名称时如何引用图像名称。

在标准场景中，在 require() 函数中使用静态图像名称可以完美地工作。然而，使用动态图像名称可能会导致复杂化。当您尝试使用 require('image!' 'avatar') 包含带有动态图像名称的字符串时，会出现此问题。因此，您可能会遇到令人沮丧的“需要未知模块”错误。

React Native 的动态图像名称支持

不幸的是，根据 React Native 文档，使用时存在限制动态图像名称。在专门讨论“静态资源”的部分中，文档明确指出“引用包中图像的唯一允许的方法是在源中逐字写入 require('image!name-of-the-asset')。 ”这意味着您不能简单地将字符串与图像名称连接起来以使其动态化。

处理动态图像要求

要解决此限制，您需要分配动态图像名称到一个变量。以下是实现此目的的方法：

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

或者，您可以利用 React-native 包中的 asset() 辅助函数来动态地需要图像：

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

请记住，对于这两种方法，您仍然需要将图像添加到 Xcode 内应用程序的 xcassets 包中。

通过遵循这些准则，您可以在 React Native 应用程序中有效地利用动态图像名称，而不会遇到可怕的“需要未知模块”错误。

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