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 }; }});
您可能感兴趣的相关文章