RN与JS交互之-封装iOS原生UI组件

原生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的事件,比如“点击按钮事件”。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容