react native 轮播组件

react-native-ezswiper

https://github.com/easyui/react-native-ezswiper

源码靠谱、简单,容易使用的轮播react native组件。

安装

$ npm install react-native-ezswiper --save

预览

图片上传失败

图片上传失败

使用

引入组件:

import EZSwiper from 'react-native-ezswiper';

简单轮播


卡片轮播


高级属性配置


竖向轮播


API

属性

属性 类型 默认值 描述
width PropTypes.number.isRequired 轮播组件宽度
height PropTypes.number.isRequired 轮播组件高度
index PropTypes.number 0 轮播默认显示项
horizontal PropTypes.bool true 是否横向滚动
loop PropTypes.bool true 是否循环
autoplayTimeout PropTypes.number 5 自动轮播时间,单位是秒
autoplayDirection PropTypes.bool true true代表朝着卡片索引大的方向
ratio PropTypes.number 1 轮播卡片缩放,默认不缩放
cardParams PropTypes.object {} 轮播卡片缩放高级参数设置,详见备注
renderRow PropTypes.func.isRequired 轮播卡片渲染
onPress PropTypes.func 轮播卡片点击事件
onWillChange PropTypes.func 轮播某卡片将要显示
onDidChange PropTypes.func 轮播某卡片已显示

cardParams属性是个对象:{cardSide,cardSmallSide,cardSpace}

方法

方法 描述
scrollTo(index, animated = true) 滚动到指定位置

License

react-native-ezswiper遵守MIT协议,具体请参考MIT.

你可能感兴趣的:(react native 轮播组件)