IDC资讯中心
项目介绍：
源码地址： https://github.com/easyui/react-native-ezswiper
react-native-ezswiper
源码靠谱、简单，容易使用的轮播react native组件。
安装
$ npm install react-native-ezswiper --save预览
使用
引入组件：
import EZSwiper from 'react-native-ezswiper';简单轮播
<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
dataSource={['0', '1' ,'2','3']}
width={ width }
height={150 }
renderRow={this.renderRow}
onPress={this.onPressRow}
/>卡片轮播
<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
dataSource={images}
width={ width }
height={150 }
renderRow={this.renderImageRow}
onPress={this.onPressRow}
ratio={0.867}
/>高级属性配置
<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
dataSource={['0', '1' ,'2','3']}
width={ width }
height={150 }
renderRow={this.renderRow}
onPress={this.onPressRow}
index={2}
cardParams={{cardSide:width*0.867, cardSmallSide:150*0.867,cardSpace:width*(1-0.867)/2*0.2}}
/>竖向轮播
<EZSwiper style={{width: width,height: 200,backgroundColor: 'white'}}
dataSource={['0', '1' ,'2','3']}
width={ width }
height={200 }
renderRow={this.renderRow}
onPress={this.onPressRow}
ratio={0.867}
horizontal={false}
/>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.
