RN 使用原生组件和事件通讯

2018-06-14

RN可以满足一般界面的绘制，但是对于一些特定的，还是需要通过原生实现会较为好。比如视频View，弹幕View。他的一般步骤是：

定义原生View
编写ViewManager
Js 引入

嵌入原生View例子

Java端

定义View
比如我们需要使用比较简单的TextView作为例子，首先自定义View

public class MyTextView extends View {
    private String text;
    private int color;
    private int textSize;
    private Paint mPaint;
    public MyTextView(Context context) {
        this(context, null);
    }

    public MyTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public MyTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setTextAlign(Paint.Align.CENTER);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setTextSize(this.textSize);
        mPaint.setColor(this.color);
        canvas.drawText(text, getWidth() / 2, getHeight() / 2, mPaint);
    }
    public void setText(String text) {
        this.text = text;
    }
    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }
    public void setColor(int color) {
        this.color = color;
    }
}

然后，配置js端的RN

public class MyTextViewViewManager extends SimpleViewManager<MyTextView> {
    @Override
    public String getName() {
        return "MyTextView";
    }
    @Override
    protected MyTextView createViewInstance(ThemedReactContext reactContext) {
        return new MyTextView(reactContext);
    }
    @ReactProp(name = "text", customType = "String")
    public void setText(MyTextView view, String text) {
        view.setText(text);
    }
    @ReactProp(name = "color", customType = "Color")
    public void setColor(MyTextView view, int color) {
        view.setColor(color);
    }
    @ReactProp(name = "textSize", customType = "int")
    public void setTextSize(MyTextView view, int textSize) {
        view.setTextSize(textSize);
    }
}

配置ReactPackage，

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

然后设置给ReactNativeHost即可。

Js端

import {requireNativeComponent, ViewPropTypes} from "react-native"
import PropTypes from "prop-types"

const mt = {
    name: "MyTextView",
    propTypes: {
        color:PropTypes.string,
        text:PropTypes.string,
        textSize:PropTypes.number,
        ...ViewPropTypes
    }
};

export const MyTextView = requireNativeComponent("MyTextView", mt);

这里，我们需要导入prop-types，用来检测类型，使用ViewPropTypes表示剩余发View配置，然后就完成了把原生View引入RN中，使用按照正常的Component使用，比如

<MyTextView
                    textSize={60}
                    text={"heihei"}
                    color={"#00ffff"}
                    style={{width: 80, height: 80}}
                />

属性解析

我们在Java端定义的时候，有一个注解是ReactProps，当然，我们可以使用ReactPropGroup注解。
首先，他是表明要导出的JavaScript属性，通过name指定，然后，被ReactProps注解的方法，他的第一个参数是该View实例对象，方法可以接受的参数有boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap
对于使用ReactProps，他除了name属性之后，还有可选的defaultBoolean等其他一些default值，假如是自定义类型，比如是Color，可以通过customType指定。
对于使用ReactPropGroup,他与上面不同是他可以指定一个names数组属性。他的主要作用是给一些属性，比如border,padding,margin等减少方法编写。比如我们设置

在js端，步骤是声明一个变量，name随便起，然后给他添加属性，属性与我们在java被声明的属性name一致，然后必须在最后添加上...ViewPropTypes。然后通过RN的requireNativeComponent()方法，抵押给参数是模块名称，第二个参数是我们的声明变量，就可以获得自定义Component了。

事件通讯

在自定义和RN之间，总会有交互，比如View做了某些操作需要对RN页面进行更新等。

未完待续…