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';
复制代码

经常使用属性介绍:

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

代码示例

render(){  
  return(  
      <View>  
        <Swiper height={200} // 指定高度 
                loop={true} // 是否开启循环
                showsButtons={true} // 设置控制按钮(左右两侧的箭头)是否可见 
                index={0}   
                autoplay={true} // 是否自动跳转
                horizontal={false} // 是否水平滚动 
                > 
                //  在这里进行添加组件操做(好比放入图片和文字)
         </Swiper>  
      </View>  
  
  );  
}  

复制代码