需求：
RN中使用了原生的播放器UI組件，當該RN頁面退出時忠售，播放器并沒有關(guān)閉者冤，仍在繼續(xù)播放中，這個時候需要在RN頁面退出的時候档痪，主動關(guān)閉視頻播放涉枫，這就需要調(diào)用原生播放器組件提供的一個方法。
過程如下：
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調(diào)用的原生方法
//參數(shù)解析：
1、nonnull?NSNumber *) reactTag,默認參數(shù)衬廷，系統(tǒng)自動傳入
2摇予、second:(NSInteger)secondParam third:(NSString*)thirdParam 對應(yīng)js端傳過來的兩個參數(shù)，js端是以數(shù)組的形式傳入的吗跋，數(shù)組中的參數(shù)個數(shù)和類型要與這里的一致
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;
? ? }
//該方法則是調(diào)用了原生UI組件的方法
releaseVlc=(intParam)=> {
UIManager.dispatchViewManagerCommand(
findNodeHandle(this),
? ? ? ? ? ? UIManager.getViewManagerConfig('VLCPlayView').Commands.releaseVLC,
? ? ? ? ? ? [intParam,'strParam']);//這里如果沒有參數(shù)需要傳入，則是null
? ? };
}
var RCTVLCPlayView =requireNativeComponent('VLCPlayView',VlcPlayViewComponent,{nativeOnly: {}});
const styles =StyleSheet.create({
containerStyle:{
}
});
4跌宛、在RN的頁面中酗宋，
使用該原生組件
import VlcPlayerView ?from "../VlcPlayViewComponent";
<VlcPlayerView ref={(vlcplayerView)=>{this.vlcplayerView = vlcplayerView}}
style={[{flex:1}, this.state.isFull && {height:SCREEN_WIDTH, width:SCREEN_HEIGHT}]}
path={path}
/>
調(diào)用原生組件方法
componentWillUnmount() {
this.vlcplayerView &&this.vlcplayerView.releaseVlc(2);
}
