native封装卡片 react_React Native 基于画板简析封装安卓原生UI

1、创建 ViewManager 的子类

2、实现方法 createViewInstance

@Override

protected DrawCanvasView createViewInstance(ThemedReactContext reactContext) {

this.mContext = reactContext;

return new DrawCanvasView(reactContext.getApplicationContext(), reactContext);

}

3、通过 @ReactProp 注解导出属性的设置方法

@ReactProp注解必须包含一个字符串类型的参数name。这个参数指定了对应属性在JavaScript 端的名字。

@ReactProp(name = PROP_DRAW)

public void setCanvasType(final DrawCanvasView drawCanvasView, boolean type) {

System.out.println(TAG + " " + type);

if (type) {

//代表老师，可以绘制画板

drawCanvasView.setCanvasType(CanvasType.CAN_DRAW);

} else {

//代表学生，可以看画板，不能绘制

drawCanvasView.setCanvasType(CanvasType.CAN_SHOW);

}

}

4、注册 ViewManager

//DrawCanvasPackage.java

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Arrays.asList(

new DrawCanvasManager()

);

}

5、实现对应的 JavaScript 模块

//DrawCanvasView.js

importReact, {Component,PropTypes}from'react';

import{requireNativeComponent,View}from'react-native';

export default classDrawCanvasViewextendsComponent{

constructor(props) {

super(props);

};

_onDraw=(event)=> {

if(this.props.onDraw) {

this.props.onDraw(event.nativeEvent);

}

}

_onDrawUp=(event)=>{

if(this.props.onDrawUp){

this.props.onDrawUp(event.nativeEvent);

}

}

_onMenuClick=(event)=>{

if(this.props.onMenuClick){

this.props.onMenuClick(event.nativeEvent);

}

}

setNativeProps(nativeProps) {

this._root.setNativeProps(nativeProps);

}

loadMaterial= (material) => {

this.setNativeProps({material: material});

}

sendCommand= (holder) => {

this.setNativeProps({send_command: holder});

}

_assignRoot= (component) => {

this._root= component;

}

render() {

constnativeProps= Object.assign({},this.props);

Object.assign(nativeProps, {

style:nativeProps.style,

loadMaterial:this.loadMaterial,

sendCommand:this.sendCommand,

onDraw:this._onDraw,

onDrawUp:this._onDrawUp,

onMenuClick:this._onMenuClick,

})

return(

ref={this._assignRoot}

{...nativeProps}

/>

)

}

}

DrawCanvasView.propTypes={

...View.propTypes,

material:PropTypes.func,

send_command:PropTypes.func,

onDraw:PropTypes.func,

onDrawUp:PropTypes.func,

can_draw:PropTypes.bool,

onMenuClick:PropTypes.func,

}

constRCTDrawCanvasView=requireNativeComponent("DrawCanvasView",DrawCanvasView,null)

6、自定义事件注册

对于用户的操作，例如绘制画板，缩放，拖拽，JS端需要响应用户的操作，所以需要原生视图向JS端发送事件，传递数据。

·列举注册事件

//PaintView.java

public enumEvents {

EVENT_ON_DRAW("onDraw"),

EVENT_ON_DRAW_UP("onDrawUp"),

EVENT_MENU_CLICK("onMenuClick");

private finalStringmName;

Events(finalString name) {

mName= name;

}

@Override

publicStringtoString() {

returnmName;

}

}

·导出自定义事件

//DrawCanvasManager.java

@Override

@Nullable

publicMapgetExportedCustomDirectEventTypeConstants