React Native封装iOS自定义原生组件

简单描述下RN如何封装iOS自定义原生组件，做了一个简单的demo，封装一个DatePicker控件，控件中有取消和确定两个按钮。取消和确定两个按钮的点击事件与RN进行交互，将选择的时间传递给RN。

以下是具体的实现方式：

一、创建继承自UIView的DataPickerView，定义监听取消、确定按钮点击事件的delegate，暴露给JS的RCTBubblingEventBlock，将按钮点击事件与数据通过block方式回调给JS

自定义DatePickerView

二、将取消、确定点击事件传递给Delegate

.m文件

三、创建继承自RCTViewManager的DatePickerViewManager，定义DataPickerView属性

DatePickerViewManager.h

四、DatePickerViewManager中将视图模块、事件回调暴露给JS，重写view方法

DatePickerViewManager.m

五、RN端通过requireNativeComponent来引入自定义原生组件

生成RN组件

六、在需要使用该原生组件时引入CustomDatePicker这个组件即可

CustomDatePicker组件配置

注：1、RN读取原生控件的回调数据，使用e.nativeEvent读取。

2、如果原生控件需要通过RN端的传递的属性来配置页面或其他的操作，则在自定义view中定义属性的时候需要重写setXxx:方法，在方法中来处理ui上的显示。

如：自定义控件需要显示RN传递的string

（1）自定义view中定义@property (nonatomic, copy) NSString *title;

（2）view.m中重写setTitle方法

- (void)setTitle:(NSString*)title {

    _titleLabel.text= title;

    }

（3）viewmanager中导出属性RCT_EXPORT_VIEW_PROPERTY(title, NSString)

（4）RN中初始化组件时传递属性