react-native-web-canvas

介绍

在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);