原生UI导出到JS端来使用,本质上还是一个模块。以iOS为例,RN版本0.44.3。
1,原生UI组件,要么是自定义,要么是继承已有原生UI组件。
2,每一个需要导出到JS的原生组件都需要一个RCTViewManager子类,类名规则:UI组件的名字+Manager。
2.1 继承RCTViewManager
2.2 导出原生View。
重写-(UIView*)view{ xxx },返回要导出的原生UI组件的实例。
2.2 导出模块
RCT_EXPORT_MODULE()
2.3 导出属性给JS.
eg. RCT_EXPORT_VIEW_PROPERTY(onClick, RCTDirectEventBlock);
3,JS端封装
为了尽量屏蔽JS端调用的不同,要将Native导出的UI组件,在JS端再封装一层。然后在导出,对外让调用者感觉不到这是一个原生组件。
需要注意一下几点:
1,在JS端渲染出来的UI组件,本质上就是一个原生UI组件,因此,组件的对用户操作的响应,首先是反映在原生逻辑里面的。
2,毕竟原生组件是JS页面的一部分,用户操作可能会带来非原生组件的更新,这个时候通过RCTDirectEventBlock或者RCTBubblingEventBlock,在原生侧定义回调事件,需要注意的是,回调事件必须以on开头,否则JS端无法响应。
RCTDirectEventBlock:直接事件,这种事件类型作为不影响UI的一些事件,比如“图片加载失败”。 RCTBubblingEventBlock:冒泡事件,就和操作DOM一样,影响UI的事件,比如“点击按钮事件”。