登录 立即注册
金钱:

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

基于FlatList的下拉、上拉刷新组件

[复制链接]
来自: huanxsd 分类: iOS精品源码 上传时间: 2017-8-16 14:17:54
Tag:

项目介绍:

react-native-refresh-list-view

Github地址
https://github.com/huanxsd/react-native-refresh-list-view
简书

初学react native,看到github上现有的相关控件实现都较为复杂,又不太符合自己心中想要的样子。于是自己做了一个简单的列表下拉、上拉刷新控件。列表使用的是FlatList。

控件的实现非常简单,代码一共100多行,方便各位根据自己的需求随意修改。如果有bug或建议,欢迎提issue。

截图

下拉刷新

1.png

上拉翻页

2.png

已加载全部数据

3.png

安装

NPM

npm install --save react-native-refresh-list-view

手动安装

下载源码,将RefreshListView.js拖入工程中

运行Demo

第一步

进入Example目录,执行:

npm install

第二步

react-native run-ios

接口

render() {
    return (
        <RefreshListView
            data={this.state.dataList}
            keyExtractor={this.keyExtractor}
            renderItem={this.renderCell}

            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
        />
    )
}

// 下拉刷新
this.setState({refreshState: RefreshState.HeaderRefreshing})

// 上拉翻页
this.setState({refreshState: RefreshState.FooterRefreshing})

// 加载成功
this.setState({refreshState: RefreshState.Idle})

// 加载失败
this.setState({refreshState: RefreshState.Failure})

// 加载全部数据
this.setState({refreshState: RefreshState.NoMoreData})

常见问题

列表滑动过程中,可能会出现警告
Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }

具体错误见官方issue
解决方案:使用图片缓存库react-native-cached-image

相关源码推荐:

我来说两句
*滑动验证:
所有评论(11)
AlonMessi 2017-8-17 14:22:39
我是来学习的
回复
hellokenken 2017-8-17 14:23:00
小弟学习了~支持,支持
回复
kengsir 2017-8-17 14:25:46
code4app确实是个好地方,必须支持~
回复
phoiu 2017-8-17 14:31:33
感谢大神~
回复
BlueManlove 2017-8-17 14:32:16
code4app确实是个好地方,必须支持~
回复
littleRed 2017-8-17 14:33:37
感谢分享,code4app有你更精彩
回复
code4app热心网友 2017-8-19 08:28:01
虽不明,但觉厉!
回复
code4app热心网友 2017-8-23 11:07:22
楼主用心了,内容非常精彩。
回复
liuxiaofeilie12 2017-8-23 14:00:24
学习学习!
回复
12下一页
提取码:  下载次数:4 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
408 0 4
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

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

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

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