React 调用Android原生自定义View

流程

Android原生

1. 创建一个ViewCircleView;
2. 创建CircleManager类并继承SimpleViewManager；
3. 创建AppReactPackage类并实现ReactPackage，在createViewManagers方法中返回CircleManager的实例。

JS

1. 创建circle.js文件；
2. 通过requireNativeComponent创建变量RCTCircle；

Java代码

CircleView.java

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); // 画一个半径为100px的圆
    }

CircleManager.java

public class CircleManager extends SimpleViewManager<CircleView> {

    @Override
    public String getName() {
        return "MCircle";
    }

    @Override
    protected CircleView createViewInstance(ThemedReactContext reactContext) {
        return new CircleView(reactContext);
    }

    /**
     * 传输背景色参数
     */
    @ReactProp(name = "color")
    public void setColor(CircleView view, Integer color) {
        view.setColor(color);
    }

    /**
     * 传输半径参数
     */
    @ReactProp(name = "radius")
    public void setRadius(CircleView view, Integer radius) {
        view.setRadius(radius);
    }
}

AppReactPackage.java

public class AppReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

Activity

 mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new AppReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

JS代码

circle.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { View, requireNativeComponent } from "react-native";

//requireNativeComponent函数中的第一个参数就是刚刚CircleManager.getName返回的值。
const RCTCircle = requireNativeComponent("MCircle", {
  propTypes: {
    color: PropTypes.number,
    radius: PropTypes.number,
    ...View.propTypes // 包含默认的View的属性
  }
});
module.exports = RCTCircle;

UI.js

<RCTCircle
          style={{
            width: 100,
            height: 100,
            position: "absolute",
            right: 0,
            top: 80
          }}
          color={processColor("#ff0000")}
          radius={50}
        />