react-native-refresh-list-view
Github地址
https://github.com/huanxsd/react-native-refresh-list-view
简书
一个基于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
Example
constructor(props) {
super(props)
this.state = {
refreshState: RefreshState.Idle,
}
}
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})
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| refreshState | number | 列表刷新状态： 1、Idle（普通状态） 2、HeaderRefreshing（头部菊花转圈圈中） 3、FooterRefreshing（底部菊花转圈圈中） 4、NoMoreData（已加载全部数据） 5、Failure（加载失败） |
None |
| onHeaderRefresh | (refreshState: number) => void | 下拉刷新回调方法 refreshState参数值为RefreshState.HeaderRefreshing |
None |
| onFooterRefresh | (refreshState: number) => void | 上拉翻页回调方法 refreshState参数值为RefreshState.FooterRefreshing |
None |
| data | Array | 同FlatList中的data属性 | None |
| footerContainerStyle | ?Object | 自定义底部容器样式 | None |
| footerTextStyle | ?Object | 自定义底部文字样式 | None |
| footerRefreshingText | ?string | 自定义底部刷新中文字 | '数据加载中…' |
| footerFailureText | ?string | 自定义底部失败文字 | '点击重新加载' |
| footerNoMoreDataText | ?string | 自定义底部已加载全部数据文字 | '已加载全部数据' |
常见问题
列表滑动过程中，可能会出现警告
Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }
具体错误见官方issue。
解决方案：使用图片缓存库react-native-cached-image
