tomoyaonishiのブログ

iOSのことを中心に・・・その他もあるよ!

Onsen UIをReact+TypeScriptで使うときの手順

Onsen UIとは

Onsen UIはcssフレームワークです。HTMLとしても使えますが、Vue.js, React.jsでも使えるラッパーが用意されています。

特徴は、AndroidならMaterialDesign、iOSならiOS Designに自動で見た目を切り替えてくれることです。モバイルWebアプリケーションを作るときにネイティブっぽく見せる、OSデザインをメインに採用したいときなどに重宝します。お気に入りです :)

onsen.io

導入方法

日本語ページが有るのですが、翻訳が古いのか情報が欠け落ちている部分があるので英語サイトがおすすめです。

まずはinstall

yarn add onsenui react-onsenui

importはこんな感じ。

import {BackButton, Card, Icon, Page, Tab, Tabbar, Toolbar, ToolbarButton} from "react-onsenui";

そして、ハマった部分がこれです。これをindex.tsxあたりでimportする。

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);

日本語サイトみてたらcss importのこと載ってなくてはまりました。。

TypeScriptのときは型はこれをインストールすればよいです。

@types/react-onsenui