我目前正在使用React Native构建测试应用程序。到目前为止，Image模块一直运行良好。
例如，如果我有一个名为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不支持动态图像名称吗？
这在“Static Resources”部分的文档中有所介绍：
引用捆绑中图像的唯一允许方法是在源中逐字写入require（'image！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捆绑包中，尽管从您的评论中可以看出您已经完成了这一点。
import React, { Component } from 'react';
import { Image } from 'react-native';
class Images extends Component {
constructor(props) {
super(props);
this.state = {
images: {
'./assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
'./assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
'./assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
}
}
}
render() {
const { images } = this.state
return (
<View>
<Image
resizeMode="contain"
source={ images['assets/RetailerLogo/1.jpg'] }
style={styles.itemImg}
/>
</View>
)}
}
你应该使用一个对象。
例如，假设我已经向API发出了一个AJAX请求，它返回一个我将保存为imageLink状态的图像链接：
source={{uri: this.state.imageLink}}
这对我有用：
我制作了一个自定义图像组件，它接受一个布尔值来检查图像是来自网络还是从本地文件夹传递。
// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.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('../images/'+imageName)}
var imageName = require('../images/'+imageName)
我只是发送整个require('./images/logo.png')作为道具。有用！
相关的，如果你有已知的图像（URLS）：
我通过这个问题破解了我的方式：
我创建了一个文件，其中包含一个存储图像和图像名称的对象：
const 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} />
我知道这不是最有效的方式，但绝对是一种解决方法。
希望能帮助到你！
如果您正在寻找一种通过循环遍历图像和描述的JSON数组来创建列表的方法，那么这将适合您。
const Profiles=[
{
"id" : "1",
"name" : "Peter Parker",
"src" : require('../images/user1.png'),
"age":"70",
},
{
"id" : "2",
"name" : "Barack Obama",
"src" : require('../images/user2.png'),
"age":"19",
},
{
"id" : "3",
"name" : "Hilary Clinton",
"src" : require('../images/user3.png'),
"age":"50",
}
]
export default Profiles;import Profiles from './ProfilesDB.js';
<FlatList
data={Profiles}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => <View>
<Image source={item.src} />
<Text>{item.name}</Text>
</View>
}
/>祝好运！
您可以使用
<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />
显示图像。
从：
https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources
作为React Native Documentation says，在编译捆绑包之前需要加载所有图像源
因此，您可以使用动态图像的另一种方法是使用switch语句。假设您要为不同的角色显示不同的头像，您可以执行以下操作：
class App extends Component {
state = { avatar: "" }
get avatarImage() {
switch (this.state.avatar) {
case "spiderman":
return require('./spiderman.png');
case "batman":
return require('./batman.png');
case "hulk":
return require('./hulk.png');
default:
return require('./no-image.png');
}
}
render() {
return <Image source={this.avatarImage} />
}
}
检查小吃：https://snack.expo.io/@abranhe/dynamic-images
此外，请记住，如果您的图像在线，您没有任何问题，您可以这样做：
let superhero = "spiderman";
<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />
我知道这已经过时了，但是我会在这里添加这个，因为我找到了这个问题，同时寻找解决方案。文档允许使用uri：'网络图像'
https://facebook.github.io/react-native/docs/images#network-images
对我来说，我得到了动态的图像
<Image source={{uri: image}} />
<StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput>
<Image
source={this.props.imgUri}
style={{
height: 30,
width: 30,
resizeMode: 'contain',
}}
/>
在我的情况下，我尝试了这么多但最后它在StyledInput中工作StyledInput组件名称图像，如果你仍然不明白让我知道
这里的重要部分：我们无法在需求中连接图像名称，例如[require（'item'+ vairable +'。png'）]
第1步：我们使用以下图像属性集合创建ImageCollection.js文件
ImageCollection.js
================================
export default images={
"1": require("./item1.png"),
"2": require("./item2.png"),
"3": require("./item3.png"),
"4": require("./item4.png"),
"5": require("./item5.png")
}
第2步：在您的应用中导入图像并根据需要进行操作
class ListRepoApp extends Component {
renderItem = ({item }) => (
<View style={styles.item}>
<Text>Item number :{item}</Text>
<Image source={Images[item]}/>
</View>
);
render () {
const data = ["1","2","3","4","5"]
return (
<FlatList data={data} renderItem={this.renderItem}/>
)
}
}
export default ListRepoApp;
如果您需要详细解释，请访问以下链接访问https://www.thelearninguy.com/react-native-require-image-using-dynamic-names