简介:
这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图.
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}}>‹</Text> |
element |
自定义右箭头按钮样式。 |
| prevButton |
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text> |
element |
自定义左箭头按钮样式。 |
代码示例
render(){
return(
<View>
<Swiper height={200} // 指定高度
loop={true} // 是否开启循环
showsButtons={true} // 设置控制按钮(左右两侧的箭头)是否可见
index={0}
autoplay={true} // 是否自动跳转
horizontal={false} // 是否水平滚动
>
// 在这里进行添加组件操作(比如放入图片和文字)
</Swiper>
</View>
);
}
网友评论