0、React Native 中的下拉刷新、上拉更多一直是一個很讓人頭疼的問題，RN中的API只能使用默認的UIRefreshControl，定制和體驗上都很差，下面我通過修改系統(tǒng)組件的方法橋接一個原生中常用的三方庫 MJRefresh ，至于上拉更多我一般使用react-native-giftedListView，可以和我這個橋接完美結合。https://github.com/XHTeng/react-native-gifted-listview

注意：該方法的缺點是每次更新react-native 組件都需要重新修改添加一次，還沒有找到好的辦法能夠保存修改（除非不更新RN）

1、在React 項目中引入MJRefresh包，注意，MJRefresj.bundle 要引入到自己項目中，不要放在React項目中，不然資源無法加載。

目錄結構

2、RCTScrollView.h 添加以下代碼，并引入#import "MJRefresh.h"

@property(nonatomic, copy) RCTDirectEventBlock onRefreshData;
@property(nonatomic, assign) BOOL isOnPullToRefresh;
@property (assign, nonatomic) BOOL currentRefreshingState;
@property(nonatomic, assign) BOOL enablePullToRefresh;
- (void)startPullToRefresh;
- (void)stopPullToRefresh;

注意，要添加在RCTScrollView的下面，不要加在了RCTEventDispatcher里面！

RCTScrollView

RCTEventDispatcher

3、RCTScrollView.m 的RCTScrollView中添加以下代碼，同樣注意添加的位置，可以在這里修改為你需要的下拉樣式

RCTScrollView

- (void)setEnablePullToRefresh:(BOOL)enablePullToRefresh
{
  _enablePullToRefresh = enablePullToRefresh;
  if (enablePullToRefresh) {
    if (_scrollView.mj_header == nil) {
      MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refreshData)];
      header.lastUpdatedTimeLabel.hidden = YES;
      header.stateLabel.hidden = YES;
      
      _scrollView.mj_header = header;
      self.currentRefreshingState = NO;
    }
  }
}

- (void)setIsOnPullToRefresh:(BOOL)isOnPullToRefresh
{
  if (_currentRefreshingState != isOnPullToRefresh) {
    _currentRefreshingState = isOnPullToRefresh;
    if (isOnPullToRefresh) {
      [_scrollView.mj_header beginRefreshing];
      
    } else {
      [_scrollView.mj_header endRefreshing];
    }
  }
}

-(void)refreshData
{
  _currentRefreshingState = _scrollView.mj_header.isRefreshing;
  if (_onRefreshData) {
    _onRefreshData(nil);
  }
}

- (void)startPullToRefresh
{
  self.isOnPullToRefresh = YES;
  [_scrollView.header beginRefreshing];
  
}

- (void)stopPullToRefresh
{
  self.isOnPullToRefresh = NO;
  [_scrollView.header endRefreshing];
  
}

4、修改RCTCustomScrollView的- (void)dockClosestSectionHeader方法實現(xiàn)，（RCTCustomScrollView位于RCTScrollView.m）

找個下面這一段代碼：

if (_rctRefreshControl != nil && _rctRefreshControl.refreshing) {
    scrollTop -= _rctRefreshControl.frame.size.height;
  }

在后面添加如下代碼：

if (self.header != nil && self.header.isRefreshing) {
    scrollTop -= self.header.frame.size.height;
}

5、在RCTScrollViewManager.m中增加如下代碼，方便ScrollView.js中調用

RCT_EXPORT_VIEW_PROPERTY(onRefreshData, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(isOnPullToRefresh, BOOL)
RCT_EXPORT_VIEW_PROPERTY(enablePullToRefresh, BOOL)

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

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

6、修改React Native自帶的ScrollView.js（位于./node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js），橋接上面添加的屬性、方法對應的props和函數(shù)

增加props：

enablePullToRefresh: PropTypes.bool,
isOnPullToRefresh: PropTypes.bool,
onRefreshData: PropTypes.func,

增加函數(shù)：

startPullToRefresh: function() {
  RCTScrollViewManager.startPullToRefresh(
      ReactNative.findNodeHandle(this)
  );
},

stopPullToRefresh: function() {
  RCTScrollViewManager.stopPullToRefresh(
      ReactNative.findNodeHandle(this)
  );
},

7、完成，在ListView或ScrollView中添加以下三個屬性即可

isOnPullToRefresh={this.state.isRefreshing} // 控制刷新狀態(tài),true 開始刷新，false 停止刷新
onRefreshData={() => {  this._onRefresh();}} // 刷新回調的方法
enablePullToRefresh={true} // 是否打開下拉刷新

一般會加上系統(tǒng)判斷，Android不需要增加修改這三個屬性