ReactNative For Android 之四：自定义组件

系列文章：
ReactNative For Android 之一：环境搭建
ReactNative For Android 之二：基本组件和API
ReactNative For Android 之三：工程结构
ReactNative For Android 之四：自定义组件
ReactNative For Android 之五：自定义module
ReactNative For Android 之六：组件生命周期

ReactNative已经包含很多常用控件，并在持续更新，但仍然不可能包含全部控件，比如很多第三方的已经我们自定义的控件，不过提供了方法让我们将想使用的控件包装到RN里，就可以在js中使用了，android里常用的Button RN没有包含(有别的可以代替),我就用Button来做个例子

一.自定义View

1. 假设这是我自定义的一个button，其实没啥变化，就是初始背景为绿色而已

2. 需要写一个类，继承SimpleViewManager<自定义的view>来管理自定义控件

3. 重写的getName是在js中引入时的名字

4. 在重写的createViewInstance方法里来创建view并返回

5. 自定义public void的方法，并用@ReactProp来标注方法，指明这是个定义属性的方法；方法第一个参数应该为该view，第二个参数为属性值，在注解里的name字段应该为属性的名字，这里基本的类型都会映射；在name后一般类似也可以指定默认值，如defaultBoolean，defaultInt，defaultFloat等，其他非基本类型需要默认值时会为null；在方法体中可以用拿到的值来对view做处理了

二.添加到自定义package

参考自定义module，需要在自定义的package里的createViewManagers方法里返回自定义控件的集合，并将自定义package添加到addPackage即可

三.JS中调用

1. 引入requireNativeComponent

2. 定义一个对象来描述该component的propTypes，有自定义的text和alpha属性，而且由于自定义viewManager里默认实现了view的各种属性，所以这里要引入view的props：…View.propTypes

3. 用requireNativeComponent(‘自定义控件的getName’，描述对象)来引出该component

4. 在使用时可以当普通组件一样使用jsx语法来绘制，如：

    var Button = requireNativeComponent(RCTButton,desc);
   
    < Button text='I am text' alpha={0.5}/>
   

四.native事件的处理

以上可以简单的实现一个button的绘制以及设置一些属性，除此之外还可以设置控件的动作事件进行捕获

1. 新建一个rn提供的Event类的子类，getEventName为时间名字，这里的topChange对应的有onChange属性等，RN定义了一些方法映射，当发送一个event时，会调用component的相应属性，这些映射关系在UIManagerModuleConstants.java文件里指明；这里就用topChange事件了

2. 重写的dispatch方法会在发送事件时调用，会传入一个RCTEventEmitter对象，可以用这个对象来调用receiveEvent()方法来发送事件，第一个参数为view的标志，设置时就可以view的getId()来设置即可；第二个参数是eventName;第三个参数是需要传递的数据，是WritableMap的键值对对象

3. 给button设置的onClickListener里，点击时用图二的方法发送一个event(自定义的event)即可

4. 在js中，绘制Button时，有个onChange属性，当native发送topChange事件时就会调用这个属性，并拿到传递的参数，直接使用进行处理即可