LoginSignup
16

More than 5 years have passed since last update.

React + OnsenUI for Reactの基本コンポーネント① (Page・Button編)

Last updated at Posted at 2016-06-22

概要

  • OnsenUIはアシアル社が開発している、パフォーマンス向上 + スマホUIの提供を行うハイブリットアプリ制作のフレームワーク。

  • 今までOnsenUIでハイブリットアプリを開発する際は、OnsenUI 1.x(AngularJS 1.xベース)で開発していましたが、Reactでも書きたかった為、OnsenUI 2.x(OnsenUI for React)の各種ReactComponentの使い方についてまとめる。

  • Reactの復習も含め、丁寧に理解したかった為、2,3個のComponent毎に記事を作る。

fully-independent.png

Component

まずは、今回作成したソースです。

src/button.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Page, Button } from 'react-onsenui';

export default class TodosApp extends React.Component {
  render() {
    return (
      <Page>
        <Button
          modifier="material"
        >
        Tap Me!
        </Button>
      </Page>
    );
  }
}

Page Component

OnsenUI 1.x の<ons-page>にあたるコンポーネントです。
<Navigator>, <Splitter>, <Tabbar>などの画面の構成を行うコンポーネントの子コンポーネントとして存在します。

Pageコンポーネント内で、<ToolBar>を利用したい場合は、
Pageコンポーネントのpropsとして、renderToolbar(fn)を記載します。
(モーダルバージョンのrenderModal(fn)も存在します。)

page.jsx
...
  render() {
    return (
      <Page
        renderToolbar={() =>
          <Toolbar>
            <div>Title</div>
          </Toolbar>
        }
      >
      </Page>
    );
  }
...

Props

PageComponentはイベントドリブンで、ページ変化にともなってイベントを取ることが可能です。
イベントの記述もPageコンポーネントのpropsに記載します。

Props Description
modifier Props値を変更して見た目を変更する。
renderToolbar={fn} PageにToolbarをrenderする。
renderModal={fn} PageにModalをrenderする。
onInit={fn} PageがDOMに生成された後に一度だけ発火。
onShow={fn} Pageが画面に現れた後に発火。
onHide={fn} Pageが画面から消えた後に発火。

各Componentには[modifier]というpropsが存在します。
modifierを変更すると、OnsenUIにpresetで入っているスタイルなどが反映されます。
大抵のmodifierはOptionalですが、上手くつかえばiOSとAndroidの切り替えなど、
イメージ通りのUIがすぐに作ることができます。

Modifier

Modifier Description
material マテリアルデザイン風にページを変更

Button Component

次はButtonコンポーネントです。
OnsenUI 1.xの<ons-button>にあたるComponentになります。

Props

Props Description
modifier Props値を変更して見た目を変更する。
disabled Disabled状態に変更する。
ripple waveEffectを掛ける。
onClick={fn} クリックした際にコールバックを実行する。

Modifier

modifierを変更する事で、様々なボタンを表現する事が可能です。

Modifier Description
outline 外の線のみの背景が透明のボタン
light 目立たないボタン
quiet 外の線もなく、背景も透明なボタン
cta 目立つボタン(明度が上がります)
large 大きなボタン
large--quiet 大きく、外線もなく、背景も透明なボタン
large--cta 大きく、目立つボタン
material マテリアルデザインのボタン
material--flat 外の線もなく、背景も透明なマテリアルデザインのボタン

終わり

ReactNativeに感度がありましたが、もう少し仕様が固まってからにしようと思い、
OnsenUI 2.xに先に取り掛かりました。

AngularベースのOnsenUI 1.xでのアプリ開発を経験している人であれば、
OnsenUI 2.x自体にはスムーズに入っていく事が可能だと思います。

続きは次回。

-P.S.-
OnsenUIのOnsenの由来は、
【Onsen -> SPA(スパ) -> Single Page Application】
から来ているそうです。
なかなかの尖り具合で、おもしろいです。

リンク

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16