react native Swiper-轮播图

github地址：
https://github.com/leecade/react-native-swiper

npm i react-native-swiper --save

使用：

<Swiper
    showsButtons={true}  //为false时不显示控制按钮
    height={220}
    autoplay={true}  //自动轮播
    autoplayTimeout={5}   //每隔5秒切换
    dot={<View style={styles.swiper_dot}/>} //未选中的圆点样式
    activeDot={<View style={styles.swiper_activeDot}/>} //选中的圆点样式
    paginationStyle={styles.swiper_pagination}>  //小圆点的位置
    {this.swiperChildrenView()}
</Swiper>

样式：

  swiper_dot: {
        backgroundColor: 'rgba(0,0,0,.5)',
        width: 8,
        height: 8,
        borderRadius: 4,
        marginLeft: 3,
        marginRight: 3,
        marginTop: 3,
        marginBottom: 3,
    },
    swiper_activeDot: {
        backgroundColor: WhiteTextColor,
        width: 16,
        height: 2,
        borderRadius: 1,
        marginLeft: 2,
        marginRight: 2,
    },

注意 ：

运行的时候会报错 Cannot read property 'x' of undefined

33.png

解决方案：

修改react-native-swiper下src/index.js

  static defaultProps = {
    horizontal: true,
    pagingEnabled: true,
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false,
    bounces: false,
    scrollsToTop: false,
    removeClippedSubviews: true,
    automaticallyAdjustContentInsets: false,
    showsPagination: true,
    showsButtons: false,
    disableNextButton: false,
    loop: true,
    loadMinimal: false,
    loadMinimalSize: 1,
    autoplay: false,
    autoplayTimeout: 60, //默认2.5,改大一些
    autoplayDirection: true,
    index: 0,
    onIndexChanged: () => null
  }

44.png

效果：

22.png