android原生组件,RN原生的安卓UI组件

这里有一大堆的原生组件可以用，一些是平台自带的，另一些是第三方库的，而更多的正在其他项目中被使用。RN包装了大部分核心平台组件，但不是所有。幸运的是可以很简单地完美集成现有的原生组件到RN中

ImageView案例

这个案例的目标是实现在JS中使用imageView。RN中对安卓原生组件的创建和管理都是通过继承ViewManager或SimpleViewManager。SimpleViewManager在这里用起来更加方便，因为它可以把应用公共的属性如背景色、透明度和弹性布局。

以上RN中创建出来的这些子类本质上都是单例的，每个子类的单个实例都是通过RN bridge创建的。这些子类把原生组件交给NativeViewHierarchyManager，NativeViewHierarchyManager再通知这些原生组件去设置和更新自己的属性。而ViewManager则让这些原生组件通过RN bridge把事件传递回给JS。

1.创建ViewManager子类。

public class ReactImageManager extends SimpleViewManager{public static final String REACT_CLASS = "RCTImageView";//JS通过这里返回的name值来获取当前子类

@OverridepublicString getName() {returnREACT_CLASS;

}//视图都是在这个方法中创建的

@OverrideprotectedReactImageView createViewInstance(ThemedReactContext reactContext) {return newReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext);

}

}

3.通过ReactProps或ReactPropsGroup注解来暴露视图属性的setter

setter方法的第一个参数应该是要更新的视图，第二个参数是属性值。要求是public void。

ReactProps注解拥有一个必填的字符串name属性。这个name值用于在JS端引用视图的属性。除了name之外，还有其他可选的defaultBoolean、defaultInt和defaultFloat。这些属性的值会被传递到setter函数中(当setter引用的属性被移除时会选用这些值)

在RN中更新视图的属性会导致setter执行。一种更新组件的方式就是移除之前设置的属性，这样setter也会执行，而且采用defaultXX设置的默认值

@ReactProp(name = "src")public voidsetSrc(ReactImageView view, @Nullable ReadableArray sources) {

view.setSource(sources);

}

@ReactProp(name= "borderRadius", defaultFloat =0f)public void setBorderRadius(ReactImageView view, floatborderRadius) {

view.setBorderRadius(borderRadius);

}

@ReactProp(name=ViewProps.RESIZE_MODE)public voidsetResizeMode(ReactImageView view, @Nullable String resizeMode) {

view.setScaleType(ImageResizeMode.toScaleType(resizeMode));

}

4.注册viewManager

在java中的最后一步就是把ViewManager注册到application中。

@Overridepublic ListcreateViewManagers(

ReactApplicationContext reactContext) {return Arrays.asList(newReactImageManager()

);

}

步骤：首先创建一个package(一个子类实现了ReactPackage，实现以上方法)，接着在Application中重新getPackages方法，将刚刚的package实例添加到数组中返回即可。过程可以参照这里https://facebook.github.io/react-native/docs/native-modules-android.html

5.实现JS模块

最后创建一个模块，模块中为用户定义了组件的接口

//ImageView.js

import PropTypes from'prop-types';

import {requireNativeComponent, ViewPropTypes} from'react-native';var iface ={

name:'ImageView',

propTypes: {

src: PropTypes.string,

borderRadius: PropTypes.number,

resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),

...ViewPropTypes,//include the default view properties

},

};

module.exports= requireNativeComponent('RCTImageView', iface);

以上接口的name值用于debug，而propTypes用于让RN去反射，来检测原生组件是否有效。

事件

就以上例子不做其他任何处理，原生组件可以处理对应的触摸事件，如setOnClickListener等。现在需要把这个事件通知给JS，当事件发生的时候(下面那个是某事件的回调方法)，开始往JS传递一个topChange事件

class MyCustomView extendsView {

...public voidonReceiveNativeEvent() {

WritableMap event=Arguments.createMap();

event.putString("message", "MyMessage");

ReactContext reactContext=(ReactContext)getContext();

reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(

getId(),"topChange",

event);

}

}

为了建立toChange消息与JS回调函数onChange的映射，需要在ViewManager中重写以下方法。这样一来，当以上消息发出之后，RN原生组件上的onChange属性回调函数就会被执行

public class ReactImageManager extends SimpleViewManager{

...publicMap getExportedCustomBubblingEventTypeConstants() {returnMapBuilder.builder()

.put("topChange",

MapBuilder.of("phasedRegistrationNames",

MapBuilder.of("bubbled", "onChange")))

.build();

}

}

在RN中定义一个组件进行包装，设置原生组件的onChange事件

//MyCustomView.js

class MyCustomView extends React.Component {

constructor(props) {

super(props);this._onChange = this._onChange.bind(this);

}

_onChange(event: Event) {if (!this.props.onChangeMessage) {return;

}this.props.onChangeMessage(event.nativeEvent.message);

}

render() {return ;

}

}

MyCustomView.propTypes={/**

* Callback that is called continuously when the user is dragging the map.*/onChangeMessage: PropTypes.func,

...

};var RCTMyCustomView =requireNativeComponent(`RCTMyCustomView`, MyCustomView, {

nativeOnly: {onChange:true}

});

文档中对于nativeOnly的解释我不是很懂....

实践

坑坑坑。。。在RN使用这个原生组件时，如果不设置尺寸，则这个组件不会被渲染出来，通过android studio monitor分析如下，少了一个节点：