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原创,转载请注明出处。
文章名称:《React Canvas:高性能渲染 React 组件》
文章链接:https://www.lbyxlz.com/react-canvas%ef%bc%9a%e9%ab%98%e6%80%a7%e8%83%bd%e6%b8%b2%e6%9f%93-react-%e7%bb%84%e4%bb%b6/
分享到: 生成海报

评论 抢沙发

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

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

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