需求：
RN中使用了原生的播放器UI组件，当该RN页面退出时，播放器并没有关闭，仍在继续播放中，这个时候需要在RN页面退出的时候，主动关闭视频播放，这就需要调用原生播放器组件提供的一个方法。
过程如下：
1、ios原生端，自定义View中：
VLCPlayView.h文件中
NS_ASSUME_NONNULL_BEGIN
@interface VLCPlayView :UIView
-(void)releaseVLC:(NSInteger) flag;
@end
VLCPlayView.m文件中
@implementation VLCPlayView
-(void)releaseVLC:(NSInteger) flag
{
NSLog('你自己的代码');
}
@end
NS_ASSUME_NONNULL_END
2、Ios原生端 VLCPlayViewManager的代码：
VLCPlayViewManager.h文件
#import
NS_ASSUME_NONNULL_BEGIN
@interface VLCPlayViewManager :RCTViewManager
@end
NS_ASSUME_NONNULL_END
VLCPlayViewManager.m文件
@interfaceVLCPlayViewManager()
@property(nonatomic,strong)VLCPlayView *vlcPlayView;
@end
@implementationVLCPlayViewManager
RCT_EXPORT_MODULE()
- (UIView*)view {
if(self.vlcPlayView)
{
if (!self.vlcPlayView) {
self.vlcPlayView= [[VLCPlayView alloc]initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,SCREEN_WIDTH*190/360)];
}
return self.vlcPlayView;
}
//下面这个方法就是给RN调用的原生方法
//参数解析：
1、nonnull NSNumber *) reactTag,默认参数，系统自动传入
2、second:(NSInteger)secondParam third:(NSString*)thirdParam 对应js端传过来的两个参数，js端是以数组的形式传入的，数组中的参数个数和类型要与这里的一致
RCT_EXPORT_METHOD(releaseVLC:(nonnull NSNumber *) reactTag, second:(NSInteger)secondParam third:(NSString*)thirdParam) {
[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager*uiManager,NSDictionary *viewRegistry) {
VLCPlayView*view = (VLCPlayView*)viewRegistry[reactTag];
if(![view isKindOfClass:[VLCPlayView class]]) {
RCTLogError(@"Invalid view returned from registry, expecting VLCPlayView, got: %@", view);
}else{
dispatch_async(dispatch_get_main_queue(), ^{
//VLCPlayView *vlcView = (VLCPlayView*)viewRegistry[reactTag];
[view releaseVLC:secondParam]; //releaseVLC: 则是上面VLCPlayView中定义的方法
});
}
}];
}
3、RN端封装代码：
import React,{Component}from 'react'
import ReactNative, {requireNativeComponent, StyleSheet, ViewPropTypes,UIManager,NativeModules,findNodeHandle} from 'react-native'
import PropTypesfrom "prop-types";
var RCT_VLCPLAYERVIEW_REF ='VlcPlayViewComponent';
export default class VlcPlayViewComponent extends Component{
static propTypes = {
path: PropTypes.string,
...ViewPropTypes,
};
render(){
var playerViewStyles = [styles.containerStyle,this.props.style];
var vlcplayerView =
style={playerViewStyles}
playUrlStr={this.props.path}
/>;
return vlcplayerView;
}
//该方法则是调用了原生UI组件的方法
releaseVlc=(intParam)=> {
UIManager.dispatchViewManagerCommand(
findNodeHandle(this),
UIManager.getViewManagerConfig('VLCPlayView').Commands.releaseVLC,
[intParam,'strParam']);//这里如果没有参数需要传入，则是null
};
}
var RCTVLCPlayView =requireNativeComponent('VLCPlayView',VlcPlayViewComponent,{nativeOnly: {}});
const styles =StyleSheet.create({
containerStyle:{
}
});
4、在RN的页面中，
使用该原生组件
import VlcPlayerView from "../VlcPlayViewComponent";
style={[{flex:1}, this.state.isFull && {height:SCREEN_WIDTH, width:SCREEN_HEIGHT}]}
path={path}
/>
调用原生组件方法
componentWillUnmount() {
this.vlcplayerView &&this.vlcplayerView.releaseVlc(2);
}