首页 > 代码库 > Onsen UI for React文档
Onsen UI for React文档
注:采用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
Onsen UI for React文档