登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

react native 轮播组件:支持循环,横竖轮播,支持卡片样式

[复制链接]
来自: easyui 分类: iOS精品源码 上传时间: 2017-12-8 13:49:06
Tag:

项目介绍:

源码地址: https://github.com/easyui/react-native-ezswiper

react-native-ezswiper

NPM version
release
GitHub license

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

安装

$ npm install react-native-ezswiper --save

预览

showios showandroid

使用

引入组件:

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

属性

属性类型默认值描述
widthPropTypes.number.isRequired 轮播组件宽度
heightPropTypes.number.isRequired 轮播组件高度
indexPropTypes.number0轮播默认显示项
horizontalPropTypes.booltrue是否横向滚动
loopPropTypes.booltrue是否循环
autoplayTimeoutPropTypes.number5自动轮播时间,单位是秒
autoplayDirectionPropTypes.booltruetrue代表朝着卡片索引大的方向
ratioPropTypes.number1轮播卡片缩放,默认不缩放
cardParamsPropTypes.object{}轮播卡片缩放高级参数设置,详见备注
renderRowPropTypes.func.isRequired 轮播卡片渲染
onPressPropTypes.func 轮播卡片点击事件
onWillChangePropTypes.func 轮播某卡片将要显示
onDidChangePropTypes.func 轮播某卡片已显示

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

cardParams

方法

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

License

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

相关源码推荐:

我来说两句
*滑动验证:
所有评论(13)
phoiu 2017-12-8 18:06:43
我是来学习的
回复
kengsir 2017-12-8 18:06:59
感谢分享,楼主V5~
回复
hellokenken 2017-12-8 18:07:04
学习...学习...
回复
BlueManlove 2017-12-8 18:07:08
膜拜大神~
回复
AlonMessi 2017-12-8 18:07:26
code4app好的内容真的很多~赞
回复
littleRed 2017-12-8 18:07:52
好好 学习了 确实不错
回复
code4app热心网友 2017-12-9 09:50:03
虽不明,但觉厉!
回复
code4app热心网友 2017-12-9 13:00:53
学习学习!
回复
code4app热心网友 2017-12-9 19:34:35
虽不明,但觉厉!
回复
12下一页
提取码:  下载次数:101 状态:已购或VIP 售价:0(原价:20)金钱 下载权限:初级码农 
3488 0 101
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表