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

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

作品详情

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

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

截图

下拉刷新

上拉翻页

已加载全部数据

安装

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

评论