<WebCanvas 
      handleBase64={this._handleBase64.bind(this)}
      ref='canvas'
      height={500} 
      width={500}
    />

_pen(){
this.refs.canvas._pen();
}

_clean(){
this.refs.canvas._clean();
}

// 以url的形式添加背景
_addImageUrl(){
this.refs.canvas._addImageUrl(url);
}

// 以base64的形式添加背景
_addImageBase64(){
this.refs.canvas._addImageBase64(base64);
}

// 得到图片的base64形式
_getBase64(){
this.refs.canvas._getBase64(base64);
}

// 保存base64
_handleBase64(data){
alert(data)
}

// 图片右转
_rotateRight(){
this.refs.canvas._rotateRight();
}

constructor(props) {
    super(props);
    this.state = {
      height: this.props.height,
      width: this.props.width
    }
  }

  render() {
    return (
      <View style={{width:this.state.width, height:this.state.height}}>  
        <WebView 
          style={{width:this.state.width, height:this.state.height}}
          ref = {(w) => {this.webview = w}}
          onLoad={this.webviewload.bind(this)}
          source={{html: html}}
          onMessage={this.messageHandler.bind(this)}
          javaScriptEnabled={true}
          domStorageEnabled={false}
          automaticallyAdjustContentInsets={true}
          scalesPageToFit={false}
          />
      </View>
    );
  }

  webviewload(){
    // alert('加载成功！')
    this.webview.injectJavaScript('init_canvas('+this.props.width+', '+this.props.height+');');  
  }

// 用于监听html想rn发送的信息
onMessage={this.messageHandler.bind(this)}

  messageHandler(e){
    var obj = JSON.parse(e.nativeEvent.data);
    if (obj.action == 0){
      this.props.handleBase64(obj.data);
    }
  } 

  // 将我们的指令打包成json字符串传送给html
  post(obj){
    this.webview.postMessage(JSON.stringify(obj));
  }
  // 得到图片的base64形式
  _getBase64(){
    this.post({action: 0})
  }

    window.document.addEventListener('message', function (e){
        var obj = JSON.parse(e.data);
        switch (parseInt(obj.action)){
          case 1:
              /* 铅笔 */
              isclean=false;
              break;
          case 2:
              /* 橡皮 */
              isclean=true;
              break;
          case 3:
              /* 右转 */
              rotateRight();
              break;
          case 4:
              /* url */
              createImg(obj.data);
              break;
          case 5:
              /* case64 */
              createImg(obj.data);
              break;
          case 0:
              /* 返回base64 */
              returnBase64();
              break;
        }
    });