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>  
  
  );  
}  

复制代码