如何封装IOS的原生UI组件给RN使用
封装原生的UI组件，与封装原生的接口组件不一样，封装原生的接口组件请参考另一篇文章：
https://www.jianshu.com/p/1d154be5ce28
项目背景：
有一个复杂的页面，里边还有播放器，整体页面使用RN开发的，但是播放器需要原生实现，因此设计上，将一个原生的播放器View封装成一个RN组件，供RN调用。本文主要包括以下几个知识点：
一、如何将一个原生的UIView封装成一个RN组件（类似于<Text>这样的RN组件）
二、RN在调用原生封装的UI组件时，如何传递参数
一、如何将一个原生的UIView封装成一个RN组件（类似于<Text>这样的RN组件）
以下是原生部分：
1、创建原生的自定义View，继承自UIView
该View中的开发都按照原生的开发即可，这里不再多说。
2、创建原生的OC类，继承自RCTViewManager，这里要注意该类的命名，要在上面的UIView类名的基础上，前面加上RCT前缀，后面加上Manager后缀,否则会提示RN找不到原生的类（可以试一下）
3、在RCTVLCPlayerViewManager类中，如下实现，也就是实现了一个返回VLCPlayerView对象的函数
#import "RCTVLCPlayerViewManager.h"
#import "VLCPlayerView.h"
@interface RCTVLCPlayerViewManager()
@property(nonatomic,strong)VLCPlayerView *vlcPlayerView;
@end
@implementation RCTVLCPlayerViewManager
RCT_EXPORT_MODULE()
- (UIView*)view {
if (!self.vlcPlayerView) {
self.vlcPlayerView = [[VLCPlayView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
}
return self.vlcPlayerView;
}
@end
以上原生的代码就已经都实现了，接下来在JS中代码怎么写呢？
1、定义一个新的js类，这里假设名为：PlayerViewComponent，PlayerViewComponent中代码的实现：
1）包含头文件：
import React,{Component}from 'react'
import ReactNative, {requireNativeComponent, StyleSheet, ViewPropTypes,UIManager}from 'react- native'
import PropTypesfrom "prop-types";
2）从原生中导出原生组件
var RCTVLCPlayerView =requireNativeComponent('RCTVLCPlayerView',PlayerViewComponent,{nativeOnly: {}});
其中第一个参数'RCTVLCPlayerView',不是随便写的，而是原生的RCTVLCPlayerViewManager去掉了后缀Manager，写成别的都有问题；第二个参数PlayerViewComponent则是当前的JS类，第3个参数传空即可。
3）定义JS类并export出去给外部调用
export default class PlayerViewComponent extends Component{
static propTypes = {
path: PropTypes.string,
...ViewPropTypes,
};
render(){
var playerViewStyles = [this.props.style];
var vlcplayerView = <RCTVLCPlayerView style={playerViewStyles} />;
return vlcplayerView;
}
}
其中RCTVLCPlayerView就是上面2）中导出来的原生组件
2、接下来就是如何在RN中使用这个新的RN组件，在你想要放置该组件的地方按照RN使用组件的方式即可：
<VlcPlayViewComponent style={[{flex:1}]}
/>
以上就是通过RN调用原生封装的UI组件
二、RN在调用原生封装的UI组件时，如何传递参数
首先是原生部分：
1、在原生的自定义UIView（这里是VLCPlayerView.h）中，添加属性
@property(nonatomic,strong) NSString *playUrl;
2、在VLCPlayerView.m中实现该属性的set方法
-(void)setPlayUrl:(NSString*)playUrl
{
_playUrl= playUrl;
//其它你想做的操作，比如更新UI，重新播放等
}
下面是RN中的代码实现部分：
1、在封装原生UI组件的JS类中，本文中是指PlayerViewComponent文件，现在我们就给原生的playUrl参数传递值。
export default class PlayerViewComponent extends Component{
static propTypes = {
path: PropTypes.string,
...ViewPropTypes,
};
render(){
var playerViewStyles = [this.props.style];
var vlcplayerView = <RCTVLCPlayerView style={playerViewStyles}
playUrl={this.props.path}
/>;
return vlcplayerView;
}
这里playUrl是原生中定义的属性，值是this.props.path；而this.props.path又是JS类PlayerViewComponent的属性，需要在使用PlayerViewComponent的时候传入，
<VlcPlayViewComponent style={[{flex:1}] path='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'}
/>
