React Canvas:高性能渲染 React 组件

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

React Canvas:高性能渲染 React 组

GitHub      源码下载

示例代码:

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 (        <Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}>          <Image style={imageStyle} src='...' />          <Text style={textStyle}>            Here is some text below an image.          </Text>        </Surface>      );    },      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      };    }    });

未经允许不得转载:前端里 » React Canvas:高性能渲染 React 组件