美文网首页
react-native-swiper 实现轮播图

react-native-swiper 实现轮播图

作者: 知命者夏洛特 | 来源:发表于2019-04-09 20:36 被阅读0次
import Swiper from 'react-native-swiper';
 <View style={styles.container}>
            
                {
                    this.state.data&&this.state.data.length>0?<Swiper
                    horizontal={true}
                    loop={true}
                    autoplay={true}
                    height={100}
                    showsPagination={true}
                    // paginationStyle={{bottom: 10}}
                    removeClippedSubviews={true}
                    showsButtons={false}
                    autoplayTimeout={0.8}
                    dot={<View style={styles.banenr_dot}></View>}
                    activeDot={<View style={styles.active_dot}></View>}
                >
                    {this.state.data.map((v,i)=>{
                        return  <View style={styles.two_line} key={i}>
                                    {v.itemList.map((item,index)=>{
                                        return  <Image key={index} style={styles.small_icon} source={{uri:item.url}}></Image>
                                    })}
                                </View>
                    })}
                </Swiper>:null
                }

            </View>


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
    },
    banenr_dot: {
        // width:5,
        // height:3,
        // backgroundColor:'#2378FF',
        // borderRadius:4,
        // marginLeft:2.5,
        // marginRight:2.5,
        // opacity:0.6
    },
    active_dot:{
        // width:8,
        // height:3,
        // backgroundColor:'#3F81EA',
        // borderRadius:10,
        // marginLeft:2.5,
        // marginRight:2.5
    },
    two_line: {
        width:'90%',
        marginLeft:'5%',
        flexDirection: "row",
        justifyContent: "space-around",
        marginTop: 22,
        marginTop:100,
    },
    small_icon:{
        width:69,
        height:69
    }
});

注意:一定要判断有了数据在进行map循环

相关文章

网友评论

      本文标题:react-native-swiper 实现轮播图

      本文链接:https://www.haomeiwen.com/subject/crqwiqtx.html