创建原生组件

DTRNRefreshHeader.h

#import "MJRefreshHeader.h"
#import "RCTComponent.h"

@interface DTRNRefreshHeader : MJRefreshHeader

@property (nonatomic,copy)RCTDirectEventBlock onRefresh;

@end

DTRNRefreshHeader.m

#import "DTRNRefreshHeader.h"
@interface DTRNRefreshHeader()

@end


@implementation DTRNRefreshHeader

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
        //TODO:自行添加控件
  }
  return self;
}
@end

DTRNRefreshHeaderManager.h

@interface DTRNRefreshHeaderManager : RCTViewManager

@end

DTRNRefreshHeaderManager.m

#import "DTRNRefreshHeaderManager.h"
#import "DTRNRefreshHeader.h"
#import "RCTBridge.h"
#import "RCTUIManager.h"
@implementation DTRNRefreshHeaderManager
{
  DTRNRefreshHeader * _header;
}
RCT_EXPORT_MODULE()

- (UIView *)view
{
  _header = [DTRNRefreshHeader headerWithRefreshingTarget:self refreshingAction:@selector(onRefreshCallback)];
  return _header;
}

-(void)onRefreshCallback{
  if (_header.onRefresh) {
        _header.onRefresh(nil);
  }
}

RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)

RCT_EXPORT_METHOD(endRefreshing:(nonnull NSNumber *)reactTag)
{
  [self.bridge.uiManager addUIBlock:
   ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, DTRNRefreshHeader *> *viewRegistry) {
     DTRNRefreshHeader *view = viewRegistry[reactTag];
     if (!view || ![view isKindOfClass:[DTRNRefreshHeader class]]) {
       RCTLogError(@"Cannot find RCTScrollView with tag #%@", reactTag);
       return;
     }
     [view endRefreshing];
   }];
}

RCT_EXPORT_METHOD(beginRefreshing:(nonnull NSNumber *)reactTag)
{
  [self.bridge.uiManager addUIBlock:
   ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, DTRNRefreshHeader *> *viewRegistry) {
     
     DTRNRefreshHeader *view = viewRegistry[reactTag];
     if (!view || ![view isKindOfClass:[DTRNRefreshHeader class]]) {
       RCTLogError(@"Cannot find RCTScrollView with tag #%@", reactTag);
       return;
     }
     [view beginRefreshing];
   }];
}

@end

JS封装

DTRNRefreshHeader.js

import React from 'react';


import {
    requireNativeComponent,
    findNodeHandle,
} from 'react-native';

const RefreshHeaderManager = require('NativeModules').DTRNRefreshHeaderManager;


var RefreshHeader = requireNativeComponent('DTRNRefreshHeader', null);

export default class DTRefreshHeader extends React.Component{
    endRefreshing(){
        RefreshHeaderManager.endRefreshing(
            findNodeHandle(this)
        );
    }
    beginRefreshing(){
        RefreshHeaderManager.beginRefreshing(
            findNodeHandle(this)
        );
    }
    render(){
        return (
            <RefreshHeader {...this.props}/>
        )
    }
}

RCTScrollView修改

引入#import "DTRNRefreshHeader.h"
找到- (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
全部替换为

[super insertReactSubview:view atIndex:atIndex];
#if !TARGET_OS_TV
  if ([view isKindOfClass:[RCTRefreshControl class]]) {
    [_scrollView setRctRefreshControl:(RCTRefreshControl *)view];
  } else if ([view isKindOfClass:[DTRNRefreshHeader class]]){
    _scrollView.mj_header = (DTRNRefreshHeader *)view;
  } else
#endif
  {
    RCTAssert(_contentView == nil, @"RCTScrollView may only contain a single subview");
    _contentView = view;
    RCTApplyTranformationAccordingLayoutDirection(_contentView, self.reactLayoutDirection);
    [_scrollView addSubview:view];
  }

大功告成，使用示例：

<ScrollView
        style={{flexDirection:'column',height:300,backgroundColor:'#ffffff'}}
        refreshControl={
            <DTRefreshHeader style={{backgroundColor:'#ffffff'}} ref={(r)=>this._refreshControl = r} onRefresh={this._onRefresh}/>
        }>
  
    <View style={{height:80,width:80,backgroundColor:'#000000',marginLeft:50}}>
        <Text style={{color:'#ffffff'}}>
            这是滚动视图（Scrollview）
        </Text>
    </View>
</ScrollView>

FlatList和SectionList 无需修改任何代码即可使用。用法同ScrollView。
上拉加载 同样可以使用以上方法去修改代码来实现