你的位置:首页 > 网页设计

[网页设计]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  }; }});

  

您可能感兴趣的相关文章
  • 网站开发中很有用的 jQuery 效果【附源码】
  • 分享35个让人惊讶的 CSS3 动画效果演示
  • 十分惊艳的8个 HTML5 & JavaScript 特效
  • Web 开发中很实用的10个效果【源码下载】
  • 12款经典的白富美型 jQuery 图片轮播插件

 

本文链接:React Canvas:高性能渲染 React 组件

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