注意:该方法的缺点是每次更新react-native 组件都需要重新修改添加一次,还没有找到好的办法能够保存修改(除非不更新RN)
目录结构
#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
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];
}
找个下面这一段代码:
if (_rctRefreshControl != nil && _rctRefreshControl.refreshing) {
scrollTop -= _rctRefreshControl.frame.size.height;
}
在后面添加如下代码:
if (self.header != nil && self.header.isRefreshing) {
scrollTop -= self.header.frame.size.height;
}
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];
}];
}
ScrollView.js
(位于./node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js)
,桥接上面添加的属性、方法对应的props和函数增加props:
enablePullToRefresh: PropTypes.bool,
isOnPullToRefresh: PropTypes.bool,
onRefreshData: PropTypes.func,
增加函数:
startPullToRefresh: function() {
RCTScrollViewManager.startPullToRefresh(
ReactNative.findNodeHandle(this)
);
},
stopPullToRefresh: function() {
RCTScrollViewManager.stopPullToRefresh(
ReactNative.findNodeHandle(this)
);
},
isOnPullToRefresh={this.state.isRefreshing} // 控制刷新状态,true 开始刷新,false 停止刷新
onRefreshData={() => { this._onRefresh();}} // 刷新回调的方法
enablePullToRefresh={true} // 是否打开下拉刷新
一般会加上系统判断,Android不需要增加修改这三个属性