React Canvas：高性能渲染 React 组-白红宇

React Canvas：高性能渲染 React 组

阅读量：7241 次

发布时间：2019-06-29

本文共 1095 字，大约阅读时间需要 3 分钟。

　　React Canvas 提供了使用渲染移动 Web App 界面的能力，替代传统的渲染，具有更接近 Native App 的使用体验。React Canvas 提供了一组标准的 React 组件，由基于的渲染元素抽象而成。

示例代码：

var React = require('react');var ReactCanvas = require('react-canvas');var Surface = ReactCanvas.Surface;var Image = ReactCanvas.Image;var Text = ReactCanvas.Text;var MyComponent = React.createClass({  render: function () {    var surfaceWidth = window.innerWidth;    var surfaceHeight = window.innerHeight;    var imageStyle = this.getImageStyle();    var textStyle = this.getTextStyle();    return (      
             
              
      
                 Here is some text below an image.        
            
         );  },  getImageHeight: function () {    return Math.round(window.innerHeight / 2);  },  getImageStyle: function () {    return {      top: 0,      left: 0,      width: window.innerWidth,      height: this.getImageHeight()    };  },  getTextStyle: function () {    return {      top: this.getImageHeight() + 10,      left: 0,      width: window.innerWidth,      height: 20,      lineHeight: 20,      fontSize: 12    };  }});