Onsen UI for React文档

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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文档的主要内容，如果未能解决你的问题，请参考以下文章

Onsen UI ScrollTop值不起作用

是否可以为 onsen ui 2 添加 RTL 方向？

Onsen UI Vue 可滑动标签栏不起作用

Onsen-ui: ons-button submit 不提交表单

使用 Cordova + Onsen + React 进行初始项目设置的分步指南

Angular Onsen UI Ajax call