注：采用ES6+JSX语法
1、开始一个项目
在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
2、在React项目中加载Onsen UI
Onsen UI for React是一个Onsen UI核心的扩展，是一个基于组件的UI框架。需要加载以下两个JS模块：
- Onsen UI Core（onsenui）
- Onsen UI for React Extension（react-onsenui）
可以使用常规<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‘;
3、Onsen UI HelloWorld with React
作为例子，我们创建一个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引入。
4、创建一个主页面（<Page>）
使用<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元素。
5、事件处理
使用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>
);
}
}
6、ons对象
https://onsen.io/v2/docs/guide/react/#the-ons-object
时间： 2024-08-25 16:42:06