欢迎光临
让我们一起努力

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      };    }    });
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

本作品采用CC BY-NC-SA 4.0进行许可:小李子的blog » React Canvas:高性能渲染 React 组件

分享到: 生成海报
avatar

评论 抢沙发

CAPTCHAis initialing...
  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活