基于FlatList的下拉、上拉刷新组件

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

推荐阅读更多精彩内容