RCTVideoPlayer
假定原生组件是一个View，在ios端封装该View
1.1 导入头文件 <React/RCTComponent.h>
1.2 导入原生组件头文件，本例子是 "TTAVPlayer.h"
1.3 引入js层传入的block 事件属性
RCTVideoPlayer.h
#import#import
#import "TTAVPlayer.h"
@interface RCTVideoPlayer : TTAVPlayerView
@property (nonatomic, copy) RCTBubblingEventBlock onBack;
@property (nonatomic, copy) RCTBubblingEventBlock onPlayError;
@property (nonatomic, copy) RCTBubblingEventBlock onPause;
@property (nonatomic, copy) RCTBubblingEventBlock onEnd;
@property (nonatomic, copy) RCTBubblingEventBlock onPlay;
@end
2.1 导入"RCTVideoPlayerManager.h"和<React/UIView+React.h>
2.2 init该View，并初始化js层设置的属性
2.3 如果该View有设置代理，实现代理方法并向js层发通知以执行额外操作
#import "RCTVideoPlayer.h"#import "RCTVideoPlayerManager.h"#import@implementation RCTVideoPlayer
- (id)init
{
self = [super initWithFrame:CGRectZero withViewMode:TTAVPlayerViewNormalMode];
[super setDelegate:self];
return self;
}
- (void)setSrc:(NSString *)src {
NSLog(@"set src -> %@", src);
[super setVideoUrl:src];
}
- (void)backButtonGetTap:(BOOL)isFullScreen {
if(self.onBack && !isFullScreen){
self.onBack(@{@"isFullScreen": @(isFullScreen)});
}
}
RCTVideoPlayerManager
1.1 继承RCTViewManager
#import<React/RCTViewManager.h>
#import "TTAVPlayer.h"
@interface RCTVideoPlayerManager : RCTViewManager
@end
2.1 声明该class属性共享
RCT_EXPORT_MODULE();
RCT_EXPORT_VIEW_PROPERTY(placeholderImage, NSString) 值属性
RCT_EXPORT_VIEW_PROPERTY(onPlay, RCTBubblingEventBlock) 事件属性
事件属性与View中的事件属性相对应，实现原生向js层通信
2.2 初始化view（每个manager都有一个view）
- (UIView *)view
{ return [[RCTVideoPlayer alloc] init]; }
2.3 导出方法给js层调用
RCT_EXPORT_METHOD(play: (nonnull NSNumber *)reactTag) { [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary*viewRegistry) {
UIView *view = viewRegistry[reactTag];
if (![view isKindOfClass:[RCTVideoPlayer class]]) {
RCTLog(@"expecting UIView, got: %@", view);
}
else {
RCTVideoPlayer *player = (RCTVideoPlayer *)view;
[player play];
}
}];
}
在js主动要求更新原生UI层的事件中，需要注意两点，
1是使用[self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary*viewRegistry) {}]来更新UI，该方法需要导入<React/RCTUIManager.h>
2是该方法需要特定的线程执行，如下
- (dispatch_queue_t)methodQueue
{
return self.bridge.uiManager.methodQueue;
}
js
导出UI组件
import { requireNativeComponent } from'react-native';
class VideoPlayer extends Component {
render() {
return <RCTVideoref="native" {...this.props} onPlayError={this.onPlayError}/>;
}
}
constRCTVideo =requireNativeComponent('RCTVideoPlayer',VideoPlayer);
export defaultVideoPlayer;
需要注意
1.1 class类似一般的react class
1.2 constructor(...args) {}
1.3 staticpropTypes= {
...View.propTypes,
src: PropTypes.string.isRequired,
onPlayError: PropTypes.func
};
1.4 js层调用原生方法
play= (url,isCache,title) => {
if(Platform.OS =='android') {
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this),
UIManager.RCTVideoPlayer.Commands.play,
[url,isCache,title]
);
}else{
const{ VideoPlayerManager } = NativeModules;
VideoPlayerManager.play(ReactNative.findNodeHandle(this));
}
};
