0.0.3 • Published 7 years ago
react-native-web-canvas v0.0.3
介绍
在WebView上封装一层，以便使用h5的canvas api
安装
npm install react-native-web-canvasAPI
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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);