Question

使用 Canvas 组件需要使用相对路径引入 Canvas 模块，将 renderCanvas 方法及上下文对象传给 Canvas 组件。

index.ios.js



'use strict';
var React = require('react-native');
var {
  Text,
  View
} = React;
var Canvas = require('./Canvas');
var styles = React.StyleSheet.create({
  container: {
    padding: 30,

    marginTop: 65,
    borderColor: '#e7e7e7',
  },
});

function renderCanvas(canvas) {
  // Canvas demo 来自：

http://codepen.io/antoniskamamis/pen/ECrKd
  var message = this.msg;
  var ctx = canvas.getContext('2d'),
    particles = [],
    patriclesNum = 50,
    w = 200,
    h = 200,
    colors = ['#f35d4f', '#f36849', '#c0d988', '#6ddaf1', '#f1e85b
        '];
  canvas.width = 200;
  canvas.height = 200;
  canvas.style.left = (window.innerWidth - 200) / 2 + 'px';
  if (window.innerHeight > 200)
    canvas.style.top = (window.innerHeight - 200) / 2 + 'px';

  function draw() {
    ctx.font = "20px Georgia";
    ctx.fillText(message, 10, 50);
  }
  draw();
}

class SimpleApp extends React.Component {
  render() {
    var context = {msg: "Hello! "};
    return (
      <View style={styles.container}>
        <View>
          <Canvas context={context}
            render={renderCanvas}
            style={{height: 200, width: 200}} />
        </View>
      </View>
    )
  }
}
  React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

现在你应该理解 WebView 组件了，在你的项目中使用吧。