概要
-
OnsenUIはアシアル社が開発している、パフォーマンス向上 + スマホUIの提供を行うハイブリットアプリ制作のフレームワーク。
-
今までOnsenUIでハイブリットアプリを開発する際は、OnsenUI 1.x(AngularJS 1.xベース)で開発していましたが、Reactでも書きたかった為、OnsenUI 2.x(OnsenUI for React)の各種ReactComponentの使い方についてまとめる。
-
Reactの復習も含め、丁寧に理解したかった為、2,3個のComponent毎に記事を作る。
Component
まずは、今回作成したソースです。
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)も存在します。)
...
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】
から来ているそうです。
なかなかの尖り具合で、おもしろいです。