react-native-swiper 实现轮播图

2019-04-09  本文已影响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循环

上一篇 下一篇

猜你喜欢

热点阅读