创建原生组件
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。
上拉加载 同样可以使用以上方法去修改代码来实现