3.React Native在Android中自定义Component和Module

React Native最终展示的UI全是Native的UI，将Native的信息封装成React方便的调用。那么Native是如何封装成React调用的？Native和React是如何交互的？

ViewManager

UI组件：将Native的UI暴露出来供JS调用。

• Native组件封装成JS组件供JS调用。这里的一个问题是怎么将Native中的属性用在JS中，以及属性可以有哪些类型的？可以先思考一下。

下面Native的代码自定义了一个View并定义了一个变化的属性color。

public class MyCustomView extends View {
   

    private Paint mPaint;

    public MyCustomView(ReactContext context) {
        super(context);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(0xffff0000);
    }

    // 这里相当于可以改变color属性
    public void setColor(int color){
        mPaint.setColor(color);
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 测试代码，onMeasure中设置的值通过getWidth()/getHeight()拿到的不一样，问题没找到
        setMeasuredDimension(300, 300);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
    }
}

创建一个ViewManager。

public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {
   
    protected static final String REACT_CLASS = "MyCustomView";

    @Override
    public String getName() { // 返回了定义的View Module的名字
        return REACT_CLASS; 
    }

    @Override
    protected MyCustomView createViewInstance(ThemedReactContext reactContext) {
        return new MyCustomView(reactContext); // 创建一个View实例供JS使用。
    }

    // 设置属性，一定需要加这个注解，不然不认识
    @ReactProp(name = "color")
    public void setColor(MyCustomView view, String color) {
        view.setColor(Color.parseColor(color));
    }
}

创建一个ReactPackage，并在Application中使用。

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

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      
        return Collections.emptyList();
    }

    // 自定义的ViewManager都可以加在这里。
    @Override
    public