Question

让我们先创建 Canvas 组件。

Canvas.js



'use strict';
var React = require('react-native');
var {
  View,
  WebView
} = React;

var Canvas = React.createClass({
  propTypes: {
    context: React.PropTypes.object,
    render: React.PropTypes.func.isRequired
  },
  render() {
    var contextString = JSON.stringify(this.props.context);
    var renderString = this.props.render.toString();
    return (

      <View>
        <WebView automaticallyAdjustContentInsets={false}
          html={"<style>＊{margin:0; padding:0; }canvas{position:
              absolute; transform :translateZ(0); }</style><canvas></
              canvas><script>var canvas = document.querySelector('
              canvas'); (" + renderString + ").call(" + contextString
              + ", canvas); </script>"}
          opaque={false} underlayColor={'transparent'}
          style={this.props.style} />
      </View>
    );
  }
});
module.exports = Canvas;

这个 Canvas 组件有两个属性：

- 上下文对象，通过 React Native 组件传进 WebView 组件。

- 渲染方法，绘制元素到 Canvas 元素。