RN ReactNative 使用 MJRefresh 自定义刷

RN 自带的 RefreshControl 是 UIRefreshControl，并且还自己写了自动偏移，存在有时不能回弹和不可以自定义视图的问题

iOS 如下修改后，可以将 RN 中所有的下拉刷新更改为 MJRefresh或者项目中自己的刷新组件（自定义刷新组件）。

更改为 MJRefresh 后，刷新效果和原生一样。

更改刷新组件为 MJRefresh

• react.podspec 文件

core 增加 ss.dependency "MJRefresh"

• RCTRefreshControl.h 文件更新

  • #import <MJRefresh/MJRefresh.h>

  • 更改继承为：MJRefreshNormalHeader

• 如下直接替换内容

- (instancetype)init
{
    if ((self = [super init])) {
        [self setRefreshingTarget:self refreshingAction:@selector(refreshControlValueChanged)];
        _isInitialRender = true;
        _currentRefreshingState = false;
    }
    return self;
}

- (void)setFrame:(CGRect)frame {
    CGFloat width = self.scrollView.frame.size.width ?: [UIScreen mainScreen].bounds.size.width;
    CGFloat height = 54;
    [super setFrame:CGRectMake(frame.origin.x, _isInitialRender ? frame.origin.y : -54, width, height)];
}

RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.backgroundColor = [UIColor clearColor];
    if (_currentRefreshingState && _isInitialRender) {
        [self _beginRefreshing];
    }
    _isInitialRender = false;
}

- (void)_beginRefreshing
{
    [self.scrollView.mj_header beginRefreshing];
}

- (void)_endRefreshing
{
    [self.scrollView.mj_header endRefreshing];
    _currentRefreshingState = false;
}

- (NSString *)title
{
  return _title;
}

- (void)setTitle:(NSString *)title
{
  _title = title;
  [self _updateTitle];
}

- (void)setTitleColor:(UIColor *)color
{
  _titleColor = color;
  [self _updateTitle];
}

- (void)_updateTitle
{

}

- (void)setRefreshing:(BOOL)refreshing
{
    
  if (_currentRefreshingState != refreshing) {

    if (refreshing) {
      if (!_isInitialRender) {
        [self _beginRefreshing];
      }
    } else {
      [self _endRefreshing];
    }
  }
}

- (void)refreshControlValueChanged
{
    _currentRefreshingState = true;

  if (_onRefresh) {
    _onRefresh(nil);
  }
}

• RCTScrollView.m 文件

- (void)setRctRefreshControl:(RCTRefreshControl *)refreshControl
{
    _rctRefreshControl = refreshControl;
    self.mj_header = refreshControl;
}

• RCTScrollView.m 文件 layoutSubviews，如下更改

RCTRefreshControl *refreshControl = _scrollView.rctRefreshControl;
  if (refreshControl && refreshControl.state == MJRefreshStateIdle) {
      refreshControl.frame = CGRectMake(0, -54, self.frame.size.width, 54);
  }

另外我的个人博客也已经上线，以后文章或先更新个人博客

onety的博客