javascript - React Native - 使用动态名称的图像需要模块

Question

我目前正在使用 React Native 构建一个测试应用程序。到目前为止，图像模块一直运行良好。

例如，如果我有一个名为 avatar 的图像，则下面的代码片段可以正常工作。

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

但是如果我将它更改为动态字符串，我会得到

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

我得到错误:

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

显然，这是一个人为的例子，但动态图像名称很重要。 React Native 不支持动态图片名称吗？

Answer 1

这在“Static Resources”部分下的文档中有所介绍:

The only allowed way to refer to an image in the bundle is to literally write require('image!name-of-the-asset') in the 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 包中，尽管从您的评论看来您已经这样做了。

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets