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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,145评论 1 32
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 写一个关于你,我不知道的你的故事,我们认识很早了,但我却不知道你,不知道你的名字,不知道你的年龄,搞笑的说,我甚...
    乔琦阅读 474评论 0 0
  • 第二篇 崇阳镇 (一)娃娃亲 临近正午的阳光有点火辣,加上一路上走了那么长的路,原本外表着装整齐的大庆脱去了外套,...
    目青阅读 224评论 0 0
  • 9月22日晚,我院在东校区外语北楼110教室举行了2016年暑期“三下乡”社会实践专题报告。新生辅导员宁顺花、20...
    衡阳师范学院阅读 319评论 0 0