react-native-refresh-list-view
Github地址
https://github.com/huanxsd/react-native-refresh-list-view
简书
初学react native,看到github上现有的相关控件实现都较为复杂,又不太符合自己心中想要的样子。于是自己做了一个简单的列表下拉、上拉刷新控件。列表使用的是FlatList。
控件的实现非常简单,开题报告,代码一共100多行,开题报告,方便各位根据自己的需求随意修改。如果有bug或建议,欢迎提issue。
截图下拉刷新上拉翻页已加载全部数据安装NPMnpm 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