美文网首页
RN ReactNative 使用 MJRefresh 自定义刷

RN ReactNative 使用 MJRefresh 自定义刷

作者: wangtieshan | 来源:发表于2018-08-16 09:59 被阅读0次

    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的博客

    相关文章

      网友评论

          本文标题:RN ReactNative 使用 MJRefresh 自定义刷

          本文链接:https://www.haomeiwen.com/subject/itdnbftx.html