React Native-为“Image”提供的属性“source”无效-正在合并图像源字符串

Question

当我连接源代码字符串时，我有来自道具的图像源，比如：需要（.../资产/图像/${props.image}）。然后我在图像的源属性上调用它，我得到了一个错误：失败的道具类型：无效的道具提供给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>
);
}

类别由FlatList上的renderItem和item调用。image是image:layer1的文件名。巴布亚新几内亚，第2层。巴布亚新几内亚。。。父组件-主屏幕：

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中使用动态本地路径。你可以在这里阅读更多信息。最好的方法是将资源嵌入到一个单独的js文件中，并从那里导出它们，然后在需要的地方导入和引用它们。

例如，拥有一个imageManager。js，代码如下

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

然后在您的组件中，您可以使用它们，如下所示

import images from './imageManager';

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

道具。然后可以将图像设置为“first_image”等。

希望这有帮助。