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 | 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 | 自定义底部已加载全部数据文字 | '已加载全部数据' | | footerEmptyDataText | ?string | 自定义服务器没有数据文字 | '暂时没有相关数据' |

常见问题

列表滑动过程中，可能会出现警告 Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }

具体错误见官方issue。 解决方案：使用图片缓存库react-native-cached-image

最后

如果喜欢，请顺手我一个star，非常感谢~ ：）