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