从Android到React Native开发（三、自定义原生控件支持）
原创
恍惚间3个月过去了，作为揭棺而起的失踪人口，迟来的第三篇，也是react native原生相关的最后的一篇，是时候给收个尾了。这次就不废话了，直接上主题(￣^￣)ゞ。
react native的高效，在于其中大部分组件，都是基于原生封装的，js中对组件的配置与操作，最终都会转化为native控件行为。以上的这段废话，总结起来就是： react native通过统一的接口封装，把原生控件转为js组件使用。
既然有官方封装，那肯定少不了自定义控件。react native自定义组件还是很方便的，关键就在于ViewManager／ViewGroupManager。从类名上，很明显是对应原生中的View和ViewGroup。
(PS ：react native 中的View组件，封装的其实是ViewGroupManager，所以View组件才可以包裹子组件，组件中的ZIndex属性，其实就是子组件在add到ViewGroup中先后，如下图)
其他的内部细节就不深究咯，愉悦的奔向主题吧(˶‾᷄ ⁻̫ ‾᷅˵)。注意，下方 代码分析 大部分来自以下路径：
//js组件
node_modules/react-native/Libraries/Components/View
node_modules/react-native/Libraries/Components/WebView
//原生java
react-native-0.xx.x/com.facebook/react/views/view
react-native-0.xx.x/com.facebook/react/views/webview1、继承ViewGroupManager
首先我们需要实现一个XXXGroupManager，继承于ViewGroupManager。其中最主要的便是重载实现getName和creatViewInstance两个方法。
-
getName指定了XXXGroupManager在js组件中获取的名称。 -
creatViewInstance创建了自定义控件在Manager中使用，这里只要将你在原生端的自定义控件，生成即可。
js组件中，使用
requireNativeComponent
，可以通过上面中getName指定的名称，获取到对应的控件，如下图，通过获取到的控件，就可以配置对应的接口啦ε-(´∀｀; )。
关于requireNativeComponent的使用说明参考下图
2、设置自定义控件属性
react native 提供
@ReactProp
和
@ReactPropGroup
注解，为js组件提供接口，配置原生控件的属性。如下图1，name = "borderStyle" 表示，js组件可以通过borderStyle设置控件的borderStyle，如图2。如果需要默认值，可以增加default属性。
这里需要注意，@ReactPropGroup是一组相近的属性设置注解，如设置UI的上下左右的不同宽度，原生中通过index判断，而它们在js端组件的设置，可以统一到原生中的一个接口。
3、原生控件操作JS组件
react native提供原生控件对js组件的交互支持，和上一篇文章类似，也是通过事件机制发送，发送消息到js组件中，js组件通过监听事件的callback处理消息。
首先，在
UIManagerModuleConstants.java
中，如图4，react native默认映射了一些组件的消息事件名，如topChange在js组件中通过onChange监听，这样在原始中通过topChange发送的消息，就可以在组件中的onChange接收到消息。
消息中的参数，可以通过WritableMap传递数据，利用rctEventEmitter发送消息。
有时候，你可能还需要自定义自己的消息名，那么你需要重写
getExportedCustomDirectEventTypeConstants
，只有注册了你的映射消息关系，才可以在js组件中，正常接收到你自定的消息名的消息。
getCommandsMap
，用来注册js组件支持的操作行为，通过
receiveCommand
处理操作，如在js组件中调用reload，就会触发原生XXXGroupManager中receiveCommand的root.reload，从而与原生控件交互。图9中，通过UIManager，发送命令到原生。
//textInput组件中主动获取焦点
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this.textInput),