我目前正在使用React Native构建一个测试应用程序。到目前为止,Image模块一直运行良好。
例如,如果我有一个名为的图像avatar
,则下面的代码段可以正常工作。
<Image source={require('image!avatar')} />
但是但是如果我将其更改为动态字符串,则会得到
<Image source={require('image!' + 'avatar')} />
我得到错误:
需要未知模块“ image!avatar”。如果您确定模块在那里,请尝试重新启动打包程序。
显然,这是一个人为的示例,但是动态图像名称很重要。React Native是否不支持动态图像名称?
在文档“ 静态资源 ” 下的内容中对此进行了介绍:
引用捆绑中的图像的唯一允许方式是在源代码中按字面意义编写require('image!name-of-the-asset')。
// 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捆绑包中,尽管从您的评论看来,您已经这样做了。
我应该在哪里添加图像,我在drawable文件夹中使用android的react native?
上面的链接不正确,该文章现在位于facebook.github.io/react-native/docs/images.html
嗨,如果我有数百张图像需要怎么办?
@chanjianyi我处于相同情况:-(