我目前正在使用 React Native 构建一个测试应用程序。到目前为止，图像module一直运行良好。
例如，如果我有一个名为 的图像avatar，下面的代码片段就可以正常工作。
<Image source={require('image!avatar')} />
但是如果我将其更改为动态字符串，我会得到
<Image source={require('image!' + 'avatar')} />
我收到错误：
需要未知module“image！avatar”。如果您确定module在那里，请尝试重新启动打包程序。
显然，这是一个人为的例子，但动态图像名称很重要。 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 包中，尽管从您的评论看来您已经这样做了。
这对我有用：
我制作了一个自定义图像组件，它接受一个布尔值来检查图像是来自网络还是从本地文件夹传递。
// 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')作为props发送。有用！
如果您知道图像（URL），则相关：
我解决这个问题的方式：
我创建了一个文件，其中包含一个存储图像和图像名称的对象：
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>
)}
/>祝你好运！
正如React Native 文档所说，在编译包之前需要加载所有图像源
因此，您可以使用动态图像的另一种方法是使用 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` }} />