简单描述下RN如何封装iOS自定义原生组件,做了一个简单的demo,封装一个DatePicker控件,控件中有取消和确定两个按钮。取消和确定两个按钮的点击事件与RN进行交互,将选择的时间传递给RN。
以下是具体的实现方式:
一、创建继承自UIView的DataPickerView,定义监听取消、确定按钮点击事件的delegate,暴露给JS的RCTBubblingEventBlock,将按钮点击事件与数据通过block方式回调给JS
二、将取消、确定点击事件传递给Delegate
三、创建继承自RCTViewManager的DatePickerViewManager,定义DataPickerView属性
四、DatePickerViewManager中将视图模块、事件回调暴露给JS,重写view方法
五、RN端通过requireNativeComponent来引入自定义原生组件
六、在需要使用该原生组件时引入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中初始化组件时传递属性