React-Native学习--轮播图第三方组件-react-native-swiper

转载：React-Native学习--轮播图第三方组件-react-native-swiper

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

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

二.在项目中导入

import Swiper from 'react-native-swiper';

三.使用

  return(  
        
          
             {this.renderImg()}  
轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示      
           
        
  
  );  
}  

renderImg(){  
        var imageViews=[];  
        for(var i=0;i  
            );  
        }  
        imageViews.push(lalala);  
        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		element	可以自定义不是当前圆点的样式
activeDot		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	‹	element	自定义右箭头按钮样式
prevButton	›	element	自定义左箭头按钮样式