RN下拉刷新（二）：修改RN代码，集成iOS原生下拉刷新

最新推荐文章于 2024-06-11 09:45:54 发布

人生如梦91

最新推荐文章于 2024-06-11 09:45:54 发布

阅读量755

点赞数

分类专栏： React-Native iOS开发文章标签： react native

本文链接：https://blog.youkuaiyun.com/cairo123/article/details/103779943

版权

文章介绍了如何在React Native (RN) 中通过修改源代码，集成iOS原生下拉刷新功能，以解决JavaScript实现下拉刷新在特定操作下失效的问题。详细步骤包括导入`RCTScrollableProtocol.h`，实现`RCTCustomRefreshContolProtocol`协议，修改`RCTRefreshControlManager.m`和`RCTScrollView.m`文件，以及处理布局异常。

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

在之前我已经用JavaScript实现了下拉刷新，详见RN下拉刷新(一)：使用JavaScript实现，但是还遗留了一个问题无法解决，该篇就来解决该问题

使用Javascript实现的下拉刷新，在列表先上滑再下滑的情况下下拉刷新无法使用，必须松开手指后再次滑动才可以正常下拉刷新，我本来想着这样算了，好不容易实现了一个下拉刷新。但是大佬非觉得不行，所以最终还是通过修改RN的源代码集成原生的下拉刷新。原生的下拉刷新是继承自MJRefreshHeader，修改起来也很简单，改动也不大。

RN的源代码位于 /项目目录/RN/node_modules/react-native/React/Views 目录下。

实现步骤如下：

#import “RCTScrollableProtocol.h” 在自己的下拉刷新控件中导入该头文件，然后实现RCTCustomRefreshContolProtocol协议，并添加属性：

@property (nonatomic, copy) RCTDirectEventBlock onRefresh;

根据自己的下拉刷新控件实现setRefreshing方法，因为MJRefresh在内部实现了绝大部分，所以下拉刷新的时候不需要我做处理，我只需要在refreshing状态变为false的时候停止刷新即可，所以我的实现如下：

- (void)setRefreshing:(BOOL)refreshing
{
   
    if(self.isRefreshing && refreshing == NO) {
   
        [self endRefreshing];
    }
    
    return ;
}