NativeBase の導入

こんにちは!カワダです!
今回はUIの作成についてです。

自前でstylesheetを整えるのもアリ、ですが、
ReactNativeではなんとも便利な NativeBase というCSSフレームワークを使うことができます。

この画像は NativeBase 公式サイト から引っ張ってきたものですが、
フレームワークを使っていないソースが左、使っているソースが右になります。
どれだけ便利か一目瞭然ですよね!?
ボタンひとつつけるだけでもこの違い。使うっきゃありません。

NativeBaseを使うとコードがスッキリします


ということで、今回はNativeBaseの導入からお話していきます。

そもそも NativeBase とは?

NativeBase は、Geekyants.comによって作成された、CSSフレームワークです。
導入すればすぐに使用できるコンポーネントが多数揃っているため、
簡単に使い始めることができます。
クロスプラットフォームコンポーネントなので、iosでもAndroidでも共通のコードで
よしなに動いてくれます。

nativeBase インストールしてみよう

インストールは非常ーーーっに簡単です。
作成したプロジェクトに対して、以下コマンドを実行します。

$ npm install native-base --save

次に以下コマンド実行でインストールは完了です。

$ npm install

次にLinkコマンドの実行をします

$ react-native link

これにて導入は完了です。

コンポーネント使ってみよう!

導入ができたところで早速NativeBaseを使ってみましょう。
搭載されているコンポーネントを確認する場合、このサイトがおすすめです。

NativeBaseコンポーネント集

英語表記にはなりますが、実装した際のイメージがios,Androidそれぞれで確認できたり、
使いたいコンポーネントごとにがっつりお手本コードが載っているので初心者でも安心です。

例えばボタンをつけたいなァと思った場合。
「Button」のリンクに飛びます。

NativeBaseコンポーネント集

すると各種類のボタンがまたリンク表示されています!

Buttonカテゴリ

今回つけたいボタンの種類のリンクに飛ぶと、

ボタンソースと実装イメージ

こんな風に、ソースと実装イメージが表示されます!

UIのデザインは試行錯誤を繰り返すことも多いので、実装のイメージがすぐに確認できるのは
効率UPですね!

皆さんもぜひ開発に取り入れてみてください!

ToDottoのデザインが気になる方はこちら↓↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です