如何在swiper中处理来自API的图像

问题描述 投票:0回答:1

我安装了react-native-swiper,我刷了3个全屏视图,一切都很好,但我必须从API刷图像,我会从API接收图像。我不知道如何显示它,因为每次我无法将我的图像放入项目中时图像的数量会发生变化我必须在一个视图中使用flatList或者什么?


return (
    <View style={styles.container}>

        <Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
            <View style={styles.slide1}>
                <Text style={styles.text}>Dima Arcol 1</Text>
            </View>
            <View style={styles.slide2}>
                <Text style={styles.text}>Dima Arcol 2</Text>
            </View>
            <View style={styles.slide3}>
                <Text style={styles.text}>Dima Arcol 3</Text>
            </View>
        </Swiper>
        <View style={styles.myButtunContainer}>
            <MyLButton/>
        </View>

    </View>
);

javascript image rest api react-native
1个回答
0
投票

您可以使用地图迭代数据。让我们说你的数据是

data = [
    {
        text: 'imageheading',
        image: 'yoururl'
    },
    ...
];

return (
    <View style={styles.container}>

    <Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>

    {this.data.map((data) => {
        return(
            <View style={styles.slide3}>
                <Text style={styles.text}>{data.text}</Text>
                <Image src={{ uri: data.image }}/>
            </View>
        );
    })}
    </Swiper>
    <View style={styles.myButtunContainer}>
        <MyLButton/>
    </View>

    </View>
);
© www.soinside.com 2019 - 2024. All rights reserved.