介绍

在WebView上封装一层，以便使用h5的canvas api

安装

npm install react-native-web-canvas

API

属性|说明|类型|默认值 ---|---|---|--- renderCanvas | 获取canvas对象的回调函数| (canvas: object): void|无 getWebViewInstance | 用于获取RN WebView实例的回调函数| (instance: object): void|无 style | 设置RN WebView样式| object|无 dimensions | 设置canvas 高宽| object|无

用法

import { AppRegistry, View } from "react-native";
import React, { Component } from "react";
import Canvas from "react-native-web-canvas";

export default class Index extends Component {
  renderCanvas(canvas) {
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 100, 100);
  }

  getWebViewInstance(instance) {
    console.log("webview instance------>", instance);
  }

  render() {
    return (
      <View style={{ height: 100, width: 100}}>
        <Canvas
          renderCanvas={this.renderCanvas}
          getWebViewInstance={instance => this.getWebViewInstance(instance)}
          dimensions={{ height: 100, width: 100}}
          style={{ backgroundColor: "yellow"}}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent("Test", () => Index);