Question

我使用swiper来显示卡片，其中每张卡片都是一张包含图片和数据的对象：

let myCards = [
    {
        name: "1", 
        image: './store/images/1.png'},
    {
        name: "2", 
        image: './store/images/2.png'},
    // ..
]

// ..

<Swiper 
    cards= {myCards}
    renderCard={(card) => {
        return (
            <View>
                <Text> {card.name} </Text>
                <Image source={card.image}/> // problem here. Set source from local
            </View>
        )
    }}
</Swiper>

我的图片为.png，位于应用目录内的文件夹中：MyProject/app/store/images

上面会出现错误，指出无效道具＆＃39;来源＆＃39;提供给图像

如果我按照Image-Facebook Code并执行此操作：source={require(card.image)}，则会出现错误：传递给require的任何内容应为字符串文字

我怎样才能做到这一点？

Answer 1

您可以将require图像放入数组中：

let myCards = [
    {
        name: "1", 
        image: require('./store/images/1.png')},
    {
        name: "2", 
        image: require('./store/images/2.png')},
    // ..
]

然后，您的代码应该按原样运行：

<Swiper 
    cards= {myCards}
    renderCard={(card) => {
        return (
            <View>
                <Text> {card.name} </Text>
                <Image source={card.image}/> // problem here. Set source from local
            </View>
        )
    }}
</Swiper>

react-native不允许您动态需要图像AFAIK。

如何从本地文件夹加载图像？

1 个答案: