前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >RN ReactNative 使用 MJRefresh 自定义刷新组件

RN ReactNative 使用 MJRefresh 自定义刷新组件

作者头像
onety码生
发布2018-11-21 11:48:03
1.8K0
发布2018-11-21 11:48:03
举报
文章被收录于专栏:码生

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

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

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

更改刷新组件为 MJRefresh

  • react.podspec 文件

core 增加 ss.dependency "MJRefresh"

  • RCTRefreshControl.h 文件更新
    • #import <MJRefresh/MJRefresh.h>
    • 更改继承为:MJRefreshNormalHeader
  • 如下直接替换内容
代码语言:javascript
复制
- (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 文件
代码语言:javascript
复制
- (void)setRctRefreshControl:(RCTRefreshControl *)refreshControl
{
    _rctRefreshControl = refreshControl;
    self.mj_header = refreshControl;
}
  • RCTScrollView.m 文件 layoutSubviews,如下更改
代码语言:javascript
复制
RCTRefreshControl *refreshControl = _scrollView.rctRefreshControl;
  if (refreshControl && refreshControl.state == MJRefreshStateIdle) {
      refreshControl.frame = CGRectMake(0, -54, self.frame.size.width, 54);
  }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 更改刷新组件为 MJRefresh
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档