React Native封装Android自定义原生控件

通过封装一个简单的视图控件CustomView来介绍使用React Native来封装android组件的方法。

一、创建继承于SimpleViewManager的视图管理类CustomViewManager

1、重写getName方法，该方法返回一个字符串标识，JS通过这个标识来找到对应的原生控件

2、重写createViewInstance方法，在方法中进行自定义视图控件的初始化

3、将原生组件暴露给JS，@ReactModule(name="getName方法返回的名称")

新建视图管理类

二、生成package，在package中注册view manager

1、重写createNativeModules方法，在封装JS与原生的通信模块时，返回对应的原生模块

2、重写createViewManagers方法，在封装原生视图组件时，返回对应的视图管理类，本例中需要返回上一步中创建的CustomViewManager

创建package，注册view manager

三、生成ReactNativeHost，在Application中注册

1、Application实现ReactApplication接口

2、创建ReactNativeHost 

    重写getUseDeveloperSupport方法，返回是否为开发模式

    重写getPackages方法，返回原生视图package（上一步创建的package）

    重写getJSMainModuleName方法，返回JS入口文件

3、重写getReactNativeHost，返回创建的ReactNativeHost实例

生成ReactNativeHost并注册application

四、JS使用原生控件

1、自定义组件类、使用requireNativeComponent引入原生控件

引入原生控件

2、需要使用控件时调用即可

需要使用时调用

五、JS向原生控件传递自定义属性

1、在自定义的视图管理类CustomViewManager中使用@ReactProp(name ="testData")定义属性名

2、重写属性setter方法setTestData()，第一个参数为自定义的视图，第二个参数为设置的属性值，数据类型支持boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap

view manager中定义属性

3、JS初始化控件时设置属性

初始化控件并设置属性

六、JS监听原生事件

1、view manager中给自定义view增加事件

2、使用WritableMap来初始化返回给JS的数据

3、使用RCTEventEmitter将数据发送给JS

原生向JS回调数据

4、JS通过onChange来监听原生的事件，返回的数据通过xxx.nativeEvent来获取。注意到原生发送的eventName与JS中监听的事件名称是不一样的，因为在UIManagerModuleConstants的getBubblingEventTypeConstants方法中已经定义好了对应关系。如果想要自定义事件名称，在view manager中重写getExportedCustomDirectEventTypeConstants这个方法即可

JS监听原生的事件

以上是对RN封装android原生控件及控件与JS之间通信的简单描述。