react-native-refresh-list-view 上拉、下拉刷新组件开源项目

我要开发同款
匿名用户2017年08月16日
139阅读

技术信息

开源地址
https://github.com/huanxsd/react-native-refresh-list-view
授权协议
MIT

作品详情

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

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

截图

下拉刷新

上拉翻页

已加载全部数据

安装

NPM

pm istall --save react-ative-refresh-list-view手动安装

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

运行Demo

第一步

进入Example目录,执行:

pm istall

第二步

react-ative ru-ios

接口

reder() {    retur (        <RefreshListView            data={this.state.dataList}            keyExtractor={this.keyExtractor}            rederItem={this.rederCell}            refreshState={this.state.refreshState}            oHeaderRefresh={this.oHeaderRefresh}            oFooterRefresh={this.oFooterRefresh}        />    )}// 下拉刷新this.setState({refreshState: RefreshState.HeaderRefreshig})// 上拉翻页this.setState({refreshState: RefreshState.FooterRefreshig})// 加载成功this.setState({refreshState: RefreshState.Idle})// 加载失败this.setState({refreshState: RefreshState.Failure})// 加载全部数据this.setState({refreshState: RefreshState.NoMoreData})常见问题

列表滑动过程中,可能会出现警告

Task orphaed for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }

功能介绍

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

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论