React native 第三方组件 React native swiper-白红宇

简介:

这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图. github地址: https://github.com/leecade/react-native-swiper

安装,切换到自己项目的根目录下,执行以下命令:

npm i react-native-swiper --save复制代码

导入:

import Swiper from 'react-native-swiper';复制代码

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

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

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	可以自定义当前页面圆点的样式

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

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}}>‹	element	自定义右箭头按钮样式。
prevButton	<Text style={ {fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›	element	自定义左箭头按钮样式。

render(){    return(        
              
     
                       //  在这里进行添加组件操作(比如放入图片和文字)         
             
          );  }  复制代码