标签：title bug otto css 屏幕 obj style pac comm
注：采用ES6+JSX语法
在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块。
可以使用monaca CLI工具包快速初始化一个应用：
$ npm install -g monaca # Install Monaca CLI - Onsen UI toolkit $ monaca create helloworld # Choose React template $ cd helloworld; monaca preview # Run preview, or "monaca debug" to run on your device
通过npm安装：
# The "react-onsenui" library requires the "onsenui" library. $ npm install --save-dev onsenui react-onsenui
Onsen UI for React是一个Onsen UI核心的扩展，是一个基于组件的UI框架。需要加载以下两个JS模块：
可以使用常规<script>标签引入：
<script src="react.js"></script> <script src="react-dom.js"></script> <script src="onsenui.js"></script> <script src="react-onsenui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
或者使用CommonJS模块的方式引入：
var React = require(‘react‘); var ReactDOM = require(‘react-dom‘); var ons = require(‘onsenui‘); var Ons = require(‘react-onsenui‘);
或者使用ES6语法引入你需要的组件：
import {Page, Toolbar, Button} from ‘react-onsenui‘;
作为例子，我们创建一个React+Onsen UI版本的Hello World应用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/onsenui.css"> <link rel="stylesheet" href="css/onsen-css-components.css"> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="onsenui.js"></script> <script src="react-onsenui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script> </head> <body> <div id="app"></div> </body> <script type="text/babel"> var App = React.createClass({ handleClick: function() { ons.notification.alert(‘Hello world!‘); }, render: function() { return ( <Ons.Page> <Ons.Button onClick={this.handleClick}>Tap me!</Ons.Button> </Ons.Page> ); } }); ReactDOM.render(<App />, document.getElementById(‘app‘)); </script> </html>
在这个例子里，我们render了一个<Ons.Page>组件，其中包含一个<Ons.Button>组件，它在被点击后触发handleClick事件处理程序。
return ( <Ons.Page> <Ons.Button onClick={this.handleClick}>Tap me!</Ons.Button> </Ons.Page> );
由本例可知，<Ons.*>组件是React组件，它们由react-onsenui引入。
使用<Page>创建一个主页面（根页面），它覆盖整个屏幕并作为其他元素的容器。
使用<Toolbar>或者<BottomToolbar>创建顶部或者底部工具条，以下是一个典型的工具条示例：
<Page renderToolbar={() =>
<Toolbar>
<div className="left">
<BackButton>Back</BackButton>
</div>
<div className="center">Title</div>
<div className="right">
<ToolbarButton>
<Icon icon="md-menu" />
</ToolbarButton>
</div>
</Toolbar> }
>
Static page app
</Page>
工具条被分为3个部分（left，center，right），任一部分都可以使用<Icon>展示图标，使用<ToolbarButton>或者<BackButton>展示按钮，或者在其中插入任意HTML元素。
使用React相同的方式响应事件处理。比如，使用onClick属性来响应点击事件，使用onChange属性响应文本变更事件：
class MyPage extends React.Component { handleClick() { ons.notification.alert(‘Hello, world!‘); } render() { return() ( <Page> <Button onClick={this.handleClick}>Click me!</Button> </Page> ); } }
https://onsen.io/v2/docs/guide/react/#the-ons-object
标签：title bug otto css 屏幕 obj style pac comm
原文地址：http://www.cnblogs.com/zczhangcui/p/6689519.html
