React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力，替代传统的 DOM 渲染，具有更接近 Native App 的使用体验。React Canvas 提供了一组标准的 React 组件，由基于的渲染元素抽象而成。
示例代码：
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 组件
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
