源码地址: 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) | 滚动到指定位置 |
react-native-ezswiper遵守MIT协议,具体请参考MIT.
,开题报告,开题报告