ReactNative--自定义下拉刷新组件(iOS)

RN有提供原生的下拉刷新组件(菊花刷新)，但并没有提供自定义刷新组件的方法。也许你会照着RCTRefreshControl来一发，不过很可惜，RCTScrollView不允许你在其内部的scrollview上添加除contentView和RCTRefreshControl以外的view。当时自己打算做的自定义刷新组件，期望能够：

1. 不改源码。
2. 刷新组件的自定义能够像导出其他原生组件的方式一样。
3. js一侧使用起来能和官方提供的原生刷新组件使用保持一致。

既然要不改源码，且使用起来和RN提供的方式一致，所以RCTScrollView的scrollview上必须可以添加其他刷新组件，于是想到了用OC的黑魔法，利用Method Swizzling，对RCTScrollView的insertReactSubview方法做处理，使自定义的刷新组件能够添加到scrollview上。经过整理，最后做到只需往项目中引入一个QSRefreshControl文件夹，就可获得自定义刷新组件的能力。

在看具体过程之前可以看一下demo：

demo2.gif

下面开始自定义下拉刷新组件的具体过程：

1. 在工程中添加QSRefreshControl文件夹，文件夹内包括了以下文件：

B9F995FA-3AB8-4EB6-A7CE-C6532C1B3019.png

QSRefreshControl是一个空白的下拉刷新组件，之后，QSRefreshControl和QSRefreshControlManager会作为基类来实现自定义刷新组件。QSRefreshMotionProtocol协议内定义了下拉刷新的各个阶段需要调用的方法以及一个返回下拉触发距离的方法。QSRefresh分类里则做了上面说的黑魔法相关的事情。

2. 自定义刷新组件，这里以TangramRefreshControl为例：

D7AEF65E-A5B8-4911-B806-90751080CAD6.png

先准备遵守QSRefreshMotionProtocol的动画视图Tangram。下拉刷新各阶段动画的处理分别放在对应的方法中实现。

  //MARK:实现QSRefreshMotionProtocol
  func draggingBeforeRelease(withOffset offset: CGFloat) {
    updateTangramBy(max(offset - 30, 0) / 90) //根据下拉距离设置动画进度
  }
  
  func releaseAndBeginRefreshing() {
    assembleSevensTo(.fox)
    startShining() //正在刷新时的处理
  }
  
  func stopRefreshingAndBackToOrigin() {
    stopShining() //刷新结束时的处理
  }
  
  func endAll() {
    assembleSevensToOrigin() //完成刷新各阶段，返回到原点
  }
  
  func triggerDistance() -> CGFloat {
    return 120 //触发距离
  }

接着创建TangramRefreshControl和TangramRefreshControlManager，分别继承QSRefreshControl和QSRefreshControlManager。
TangramRefreshControl里，我们只需在其初始化方法中将动画视图Tangram赋给refreshView属性 (refreshView是从QSRefreshControl中继承来的，表示刷新用的动画视图)。再重写下layoutSubviews方法，以便在scrollview大小改变时更改refreshView的位置或大小。(如果确定位置始终不变可以不重写，这里Tangram需要始终在scrollview上方居中，所以重写了下)。代码如下：

- (instancetype)init
{
  self = [super init];
  if (self) {
    self.refreshView = [[Tangram alloc] initWithFrame:CGRectMake(self.frame.size.width * 0.5 - 25, 0, 50, 70)];
  }
  return self;
}

- (void)layoutSubviews {
  [super layoutSubviews];
  self.refreshView.frame = CGRectMake(self.frame.size.width * 0.5 - 25, 0, 50, 70);
}

再来看TangramRefreshControlManager，如果不需要暴露其他属性(QSRefreshControlManager中已经暴露了refreshing和onRefresh)，就直接如下了。

RCT_EXPORT_MODULE();

- (TangramRefreshControl*)view
{
  return [TangramRefreshControl new];
}

3. 这样，原生端的处理就结束了，再来看js端的使用。先获取刷新组件

import {
  requireNativeComponent
} from 'react-native'; 
var Tangram = requireNativeComponent('TangramRefreshControl');

接着在scrollview上

<ScrollView
  refreshControl={
    <Tangram 
    refreshing={this.state.refreshing}
    onRefresh={this._handleRefresh}
    />}
>
</ScrollView>

这样下拉刷新就添加完成了，可以看到我们依然使用了ScrollView的refreshControl属性，做到了与官方的一致（为什么可以这样使用，可以看一下ScrollView的源码哦），其他诸如Flatlist等基于ScrollView封装的组件，一样可以通过这样的方式添加（注意Flatlist不要直接设置onRefresh属性，设置了就默认使用那个菊花刷新了）。

QSRefreshControl文件夹在github上可以获取到。