React Native - 提供给`Image`的无效道具`source` - 连接图像源字符串

Question

当我连接源字符串时，我有来自道具的图像源：require(../assets/images/${props.image})。然后我在图像的源属性上调用它我得到一个错误：失败的道具类型：无效的道具source提供给Image。

有人可以帮忙吗，非常感谢

function Category(props) {
let image = `require(../assets/images/${props.image})`;
console.log(image);
return (
    <TouchableOpacity style={styles.container}>
        <View>
            <Image style={{ width: 60, height: 60 }} source={image}></Image>
            <Image style={{ height: 10, width: 12 }} source={require('../assets/images/Layer1.png')}></Image>

        </View>
        <View></View>
    </TouchableOpacity>
);
}

Category被FlatList上的renderItem调用，item.image为image的文件名：layer1.png, layer2.png... 父组件 - MainScreen：

function MainScreen({ navigation }) {
return (
    <Screen style={styles.container}>
        <Header isHome={true}>HOME</Header>
        <ScrollView>
            <View style={styles.main}>
                <Carousel data={bannerSlide} />                 
                <Text>Go to Detail</Text>
                <View style={styles.category}>
                    <FlatList
                        style={styles.dishList}
                        data={dishList}
                        keyExtractor={item => item.label.toString()}
                        horizontal
                        snapToAlignment="center"
                        scrollEventThrottle={16}
                        showsHorizontalScrollIndicator={false}
                        renderItem={({ item }) =>
                            <Category
                                name={item.name}
                                image={item.image}
                            />
                        }
                    />
                </View>
     
            </View>
        </ScrollView>
    </Screen>
);
}

Answer 1

你正试图将一个字符串传递给image 变量，而源将失败，因为你提供了一个字符串。你需要像下面这样更新它

let image = require(`../assets/images/${props.image}`);

编辑：

require 在设备上呈现应用程序之前嵌入所有图像，这意味着您不能在 require 中使用动态本地路径。您可以阅读更多信息here。最好的方法是将资源嵌入到单独的 js 文件中，然后从那里导出它们，然后在需要的地方导入和引用它们。

例如，有一个带有以下代码的 imageManager.js

export default {
   first_image: require('./image.png'); 
}

然后在你的组件中你可以像下面这样使用它们

import images from './imageManager';

function Category(props) {
let image = images[props.image];
...

props.image 然后可以设置为 'first_image' 等等。

希望对您有所帮助。