React Native（下拉刷新，加载更多）超简单实现！

最新推荐文章于 2025-04-06 10:50:33 发布

vv_小虫

最新推荐文章于 2025-04-06 10:50:33 发布

阅读量2.3w

点赞数 1

分类专栏： RN学习笔记

本文链接：https://blog.csdn.net/vv_bug/article/details/61922114

版权

本文介绍了如何在React Native中实现下拉刷新和加载更多的功能。通过利用rn自带的RefreshControl处理下拉刷新，监听ScrollView的scroll事件来判断是否滑动到底部，从而触发加载更多。在iOS中，需要设置scrollEventThrottle属性以确保事件的正确触发。文中还展示了关键代码片段，如_onScroll方法中的条件判断以及如何更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们直接进入我们今天的主题了.我们先看一下今天要实现的效果：

这里写图片描述

我们下拉的时候显示“下拉刷新状态“，当滑动到底部的时候自动显示“加载更多“。

思路：
1、下拉刷新我们直接使用rn自带的RefreshControl。
2、当我们滑动到scrollview或者listview的最底部的时候，开始显示进度条，然后加载更多。

好啦～～我们今天主要要解决的就是怎么判断scrollview或者listview滑动到最底部：

1、scrollview滑动到最顶部

搞过android的小伙伴都知道，在我们原生scrollview中，当我们的scrollview的scrollY为0的时候，即到达顶部位置，那么rn中也是一样的。

2、scrollview滑动到滑动到底部

当scrollview的高度＋scrollY>=contentHeight的时候，就证明已经滑动到底部了。

好了，有了思路我们就开动了，在scrollview 中我们可以监听scroll的变化：

<ScrollView
                    refreshControl={
                         <RefreshControl
                            refreshing={
  this.state.isRefreshing}
                            onRefresh={
  this._onRefresh.bind(this)}
                            tintColor="#ff0000"
                            title="加载中..."
                            titleColor="#00ff00"
                            colors={['#ff0000', '#00ff00', '#0000ff']}
                            progressBackgroundColor="#ffffff"
                          />
                    }
                    onScroll={
  this._onScroll.bind(this)}
                    scrollEventThrottle={
  50}
                >

注意ios中一定要给scrollEventThrottle这个属性一个值，不然onScroll调用的频率会很少，影响我们的效果。

然后我们看看_onScroll方法中怎么写呢？

/**
     * scrollview滑动的时候
     * @private
     */
    _onScroll(event) {
        if(this.state.loadMore){
            return;
        }
        let y = event.nativeEvent.contentOffset.y;
        let height = event.nativeEvent.layoutMeasurement.height;
        let

最低0.47元/天解锁文章