react-native-refresh-list-view
一个基于FlatList的列表下拉、上拉刷新控件。代码一共100多行，尽量写得简单易懂，方便各位根据自己的需求随意修改。 如果有bug或建议，欢迎提issue。
截图
下拉刷新
上拉翻页
已加载全部数据
安装
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})
// 服务器没有数据
this.setState({refreshState: RefreshState.EmptyData})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 |
null |
| onFooterRefresh | ?(refreshState: number) => void | 上拉翻页回调方法 refreshState参数值为RefreshState.FooterRefreshing |
null |
| data | Array | 同FlatList中的data属性 | None |
| footerRefreshingText | ?string | 自定义底部刷新中文字 | '数据加载中…' |
| footerFailureText | ?string | 自定义底部失败文字 | '点击重新加载' |
| footerNoMoreDataText | ?string | 自定义底部已加载全部数据文字 | '已加载全部数据' |
| footerEmptyDataText | ?string | 自定义空数据文字 | '暂时没有相关数据' |
| footerRefreshingComponent | ?any | 自定义底部刷新控件 | null |
| footerFailureComponent | ?any | 自定义底部失败控件 | null |
| footerNoMoreDataComponent | ?any | 自定义底部已加载全部数据控件 | null |
| footerEmptyDataComponent | ?any | 自定义空数据控件 | null |
常见问题
列表滑动过程中，可能会出现警告 Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }
具体错误见官方issue。 解决方案：使用图片缓存库react-native-cached-image
最后
如果喜欢，请顺手我一个star，非常感谢~ ：）