React Natite实现图片轮播器

图片轮播器在客户端开发中非常常见,iOS原生开发时候我们可以使用scrollview实现.在跨平台React Native中我们同样可以使用这个组件.不过如果想要更快更高效那我们就可以使用框架:react-native-swiper
具体使用方法:

安装

1,打开终端进入当前项目
2,输入npm install react-native-swiper --save

导入框架

import Swiper from 'react-native-swiper';

具体实现过程

}//自定义指示点
  activeDot={}//当前指示点
             >
    
      第一页
    
    
        第二页
     
     
         第三页
      


样式
wrapper: {
        backgroundColor:'green',
        height:200
    },
    slide1: {
        // flex: 1,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        // flex: 1,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        // flex: 1,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }

效果如下

轮播图.png