RN原生的安卓UI组件

https://facebook.github.io/react-native/docs/native-components-android.html

　　这里有一大堆的原生组件可以用，一些是平台自带的，另一些是第三方库的，而更多的正在其他项目中被使用。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<ReactImageView> {
 
    public static final String REACT_CLASS = "RCTImageView";
 
    // JS通过这里返回的name值来获取当前子类
    @Override
    public String getName() {
        return REACT_CLASS;
    }
 
    // 视图都是在这个方法中创建的
    @Override
    protected ReactImageView createViewInstance(ThemedReactContext reactContext) {
        return new ReactImageView(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 void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
    view.setSource(sources);
  }
 
  @ReactProp(name = "borderRadius", defaultFloat = 0f)
  public void setBorderRadius(ReactImageView view, float borderRadius) {
    view.setBorderRadius(borderRadius);
  }
 
  @ReactProp(name = ViewProps.RESIZE_MODE)
  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
  }

4.注册viewManager

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

  @Override
  public List<ViewManager> createViewManagers(
                            ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
      new ReactImageManager()
    );
  }

　　步骤：首先创建一个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 extends View {
   ...
   public void onReceiveNativeEvent() {
      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<MyCustomView> {
    ...
    public Map getExportedCustomBubblingEventTypeConstants() {
        return MapBuilder.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 <RCTMyCustomView {...this.props} onChange={this._onChange} />;
  }
}
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的解释我不是很懂....

实践

　　自己测试了一个引用TextView的例子，项目地址：https://github.com/947133297/native-ui-component-android-example

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