从 Android 到 React Native 开发（3、自定义原生控件支持）

 恍惚间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/webview复制代码

一、继承ViewGroupManager

 首先咱们须要实现一个XXXGroupManager，继承于ViewGroupManager。其中最主要的即是重载实现getName和creatViewInstance两个方法。

• getName 指定了XXXGroupManager在js组件中获取的名称。

• creatViewInstance 建立了自定义控件在Manager中使用，这里只要将你在原生端的自定义控件，生成便可。

 js组件中，使用requireNativeComponent，能够经过上面中getName指定的名称，获取到对应的控件，以下图，经过获取到的控件，就能够配置对应的接口啦ε-(´∀｀; )。

关于requireNativeComponent的使用说明参考下图

二、设置自定义控件属性

 react native 提供 @ReactProp 和 @ReactPropGroup 注解，为js组件提供接口，配置原生控件的属性。以下图1，name = "borderStyle" 表示，js组件能够经过borderStyle设置控件的borderStyle，如图2。若是须要默认值，能够增长default属性。

图1

图2

 这里须要注意，@ReactPropGroup是一组相近的属性设置注解，如设置UI的上下左右的不一样宽度，原生中经过index判断，而它们在js端组件的设置，能够统一到原生中的一个接口。

图3

三、原生控件操做JS组件

 react native提供原生控件对js组件的交互支持，和上一篇文章相似，也是经过事件机制发送，发送消息到js组件中，js组件经过监听事件的callback处理消息。

 首先，在 UIManagerModuleConstants.java 中，如图4，react native默认映射了一些组件的消息事件名，如topChange在js组件中经过onChange监听，这样在原始中经过topChange发送的消息，就能够在组件中的onChange接收到消息。

 消息中的参数，能够经过WritableMap传递数据，利用rctEventEmitter发送消息。

图4

图5

 有时候，你可能还须要自定义本身的消息名，那么你须要重写
getExportedCustomDirectEventTypeConstants ，只有注册了你的映射消息关系，才能够在js组件中，正常接收到你自定的消息名的消息。

图6

图7

四、js组件操做原生控件

 既然原生控件能够操做组件，那么js组件也有控制原生控件的需求。这时候咱们能够重载 getCommandsMap ，用来注册js组件支持的操做行为，经过 receiveCommand 处理操做，如在js组件中调用reload，就会触发原生XXXGroupManager中receiveCommand的root.reload，从而与原生控件交互。

图9中，经过UIManager，发送命令到原生。

图8

图9

 这类使用方式，相似的使用场景有，例如

//textInput组件中主动获取焦点
UIManager.dispatchViewManagerCommand(
                    ReactNative.findNodeHandle(this.textInput),
                    UIManager.AndroidTextInput.Commands.focusTextInput,
                    null);复制代码

五、js端组件实现

 最终在原生端配置结束后，js端配置完对应逻辑，经过 module.exports = WebView 导出组件使用。

结言

 拖了这么久，react native和andorid原生相关的文章终于收尾啦(◐‿◑)，也算是对react native的一个里程碑吧。在实际开发中，react native的代码的复用率仍是挺高的，做为跨平台开发的一种，仍是蛮推荐你们尝试下。

 接下来有时间会把github的demo完善下，毕竟demo落下的有点多了，欢迎你们关注哟ε-(´∀｀; )。

我的github入口：github.com/CarGuo

还记得我吗？