当前位置: 代码迷 >> .NET相关 >> React Canvas:高性能点染 React 组
  详细解决方案

React Canvas:高性能点染 React 组

热度:734   发布时间:2016-04-24 02:54:13.0
React Canvas:高性能渲染 React 组

  React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验。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 组件

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源