一.通过npm安装React-native-swiper

    $ npm install react-native-swiper --save  
    $ npm i react-timer-mixin --save  

二.在项目中导入

    import Swiper from 'react-native-swiper';  

三.使用

    render(){  
      return(  
          <View>  
            <Swiper height={200}  
                    loop={true}  
                    // showsButtons={true}  
                    index={0}  
                    autoplay={true}  
                    horizontal={false}  
                    >  
                 {this.renderImg()}  
    轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示<span style="white-space:pre">    </span>  
             </Swiper>  
          </View>  
      
      );  
    }  

    renderImg(){  
            var imageViews=[];  
            for(var i=0;i<images.length;i++){  
                imageViews.push(  
                    <Image  
                        key={i}  
                        style={{flex:1}}  
                        source={{uri:images[i]}}  
                        />  
                );  
            }  
            imageViews.push(<Text>lalala</Text>);  
            return imageViews;  
        }  

四.相关属性说明
1.Basic

Prop    Default     Type    Description
horizontal  true    bool    如果值为true时，那么滚动的内容将是横向排列的，而不是垂直于列中的。
loop    true    bool    如果设置为false，那么滑动到最后一张时，再次滑动将不会展示第一张图片。
index   0   number  初始进入的页面标识为0的页面。
showsButtons    false   bool    如果设置为true，那么就可以使控制按钮（即：左右两侧的箭头）可见。
autoplay    false   bool    设置为true，则页面可以自动跳转。

2.Custom basic style & content

Prop    Default     Type    Description
width   -   number  如果你没有特殊的设置，就通过flex:1默认为全屏。
height  -   number  如果你没有特殊的设置，就通过flex:1默认为全屏。
style   {...}   style   设置页面的样式。

3.Pagination

Prop    Default     Type    Description
showsPagination     true    bool    默认值为true，在页面下边显示圆点，以标明当前页面位于第几个。
paginationStyle     {...}   style   设置页面原点的样式，自定义的样式会和默认样式进行合并。
renderPagination             
dot     <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />     element     可以自定义不是当前圆点的样式
activeDot   <View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />  element     可以自定义当前页面圆点的样式

4.Autoplay

Prop    Default     Type    Description
autoplay    true    bool    设置为true可以使页面自动滑动。
autoplayTimeout     2.5     number  设置每个页面自动滑动停留的时间
autoplayDirection   true    bool    圆点的方向允许默认自己控制

5.Control buttons

Prop    Default     Type    Description
showsButtons    true    bool    是否显示控制箭头按钮
buttonWrapperStyle  

{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30,  top: 70, left: 0, alignItems:'flex-start'}

    style   定义默认箭头按钮的样式
nextButton  

<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text>

    element     自定义右箭头按钮样式
prevButton  

<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text>

    element     自定义左箭头按钮样式