在React中使用Native如何实现自定义下拉刷新上拉加载的列表

在移动端开发中列表页是非常常见的页面，在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图。通常列表页都会有大量的数据需要加载显示，这时候就用到了分页加载，因此对于列表组件来说，实现下拉刷新和上拉加载在很多情况下是必不可少的。

本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView，对原始的FlatList进行封装之后，再调用上拉和下拉刷新就十分方便了。

下拉刷新的实现十分简单，这里我们沿用FlatList本身的属性来实现

onRefresh— 设置此选项后，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

refreshing—— bool值，用来控制刷新控件的显示与隐藏。刷新完成后设为false。

通过这两个属性设置我们就可以实现FlatList头部的刷新操作，控件使用默认的样式，Android和iOS沿用各自系统的组件来显示。

重点在于上拉加载更多，React Native的列表组件中没有这个功能，需要我们自己实现。 对于上拉加载，通常我们有几种状态，这里我创建一个RefreshState.js文件存放上拉加载的状态：

然后根据这几种状态来封装一个RefreshFooter组件，使其根据不同状态显示不同内容，废话不多说上代码：

注意，propTypes是我们给RefreshFooter组件定义的给外部调用的方法，方法类型需要使用PropTypes来指定，需要安装facebook的prop-types依赖库，最好使用 yarn add prop-types 安装，不容易出错。这里用作运行时的类型检查，可以点击这里 详细了解。

defaultProps中我们定义了几种不同状态下默认的文本内容，可以在外部传值进行修改。

接下来就要来实现这个RefreshListView了。首先应该明确的是，这个RefreshListView要有头部刷新和尾部刷新的调用方法，具体调用数据的方法应该在外部实现。先跟RefreshFooter一样定义两个方法：

上面说到头部的下拉刷新使用FlatList自带特性实现，我们需要定义一个bool值isHeaderRefreshing来作为refreshing属性的值，控制头部显示与否。同时定义一个isFooterRefreshing来判断尾部组件的刷新状态。定义footerState用来设定当前尾部组件的state，作为RefreshFooter的值。

render函数如下：

可以看到上面的代码中有beginHeaderRefresh和beginFooterRefresh两个方法，这两个方法就是用来调用刷新的，但是在刷新之前还有一些逻辑情况需要判断。比如头部和尾部不能够同时刷新，不然数据处理结果可能受到影响，正在刷新时要防止重复的刷新操作，这些都是要考虑的。这里我在代码中详细注释了：

其中startHeaderRefreshing和startFooterRefreshing的逻辑如下：

在刷新之前，我们需要将头部或尾部的组件显示出来，然后再调用外部的数据接口方法。这里setState这样写的好处是state中的值更新完成后才会调用箭头函数中的方法，是有严格顺序的，如果把 this.props.onFooterRefresh && this.props.onFooterRefresh() 写在setState外部，在UI上我们可能看不到头部的loading或者尾部的努力加载中，接口方法就已经调用完毕了。

最后，在刷新结束后我们还需要调用停止刷新的方法，使头部或尾部组件不再显示，否则一直是加载中还可能让人以为是bug。下面看看停止刷新的方法：

这里传入一个尾部组件状态的参数是为了更新尾部组件的样式。同时对数据源data进行一个判断，如果为空说明当前没有数据，可以显示空白页面，那么尾部组件也没必要显示了。

以下是我使用RefreshListView实现的豆瓣电影页面分页加载的效果图：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS实现的集合去重，交集，并集，差集功能示例

setTimeout时间设置为0详细解析

vue-cli脚手架config目录下index.js配置文件的方法

以上就是在React中使用Native如何实现自定义下拉刷新上拉加载的列表的详细内容，更多请关注Gxl网其它相关文章！