React NativeでUIにNativeBaseを導入してみる

2017年5月22日2017年5月27日

自前でstylesheetで整えるのもありかな？と思ったのですが、せっかくならNativeBaseというフレームワークを利用して、React NativeでUIを整えてみようと思い今回導入してみました。

ゴールとしては、NativeBaseのインストールから利用できるライブラリの一部である「ボタン」を表示しようと思います。

今回のゴール

1 まずNaitiveBaseって？
2 Installしてみる
3 設定してみる
- 3.1 NativeBase概念
- 3.2 Buttonを表示してみる
4 確認してみる
5 他にもこんなことができるらしい
6 まとめ

まずNaitiveBaseって？

Geekyants.comというチームが作成したフロントエンドフレームワーク。

React Nativeで活用できるオープンソースのUIコンポーネントライブラリで、iOSおよびAndroidプラットフォーム用のネイティブモバイルアプリケーションが構築できます。

さっそく、導入してみる。

プロジェクト作成がわからない方は、以下を参照ください。

React NativeでiOS開発を始めてみよう | 三十路エンジニア Blog

今回は、FacebookのOSS「React Native」を利用して、Macで初期プロジェクトを立ち上げるところまで始めたの ...

https://westhillworker.com/react-native-start/

Installしてみる

以下コマンドを実行して、ReactNativeプロジェクトに適応する。

// 自身で作成したreact native プロジェクトのディレクトリで実行
$ npm install native-base —save
$ react-native link

設定してみる

Atom・vimコマンドなどで、ご自身が作成したプロジェクトを開きます。

ReactNativeで起動時に読み込まれる以下ファイルにNativeBaseを読み込ませます。

■iosの場合、「index.ios.js」
■Androidの場合、「index.android.js」

// 他importと同じ箇所あたりに、記述する
import { Container, Content, Button, Text } from 'native-base';

今回は、iosでButtonを使いたいので、その辺りを中心にimportします。

ここから実戦に入る前に、少しNativeBaseの概念について触れておきます。

NativeBase概念

NativeBaseはcontainerに基づいて独自のフレームコンポーネントを提供します。

すべてのコンポーネントはコンテナ内に含める必要があり、Containerは主にheader、content、footerの3つのコンポーネントからなる。

Containerに既存のスタイルシートが組み込まれており、必要があればカスタマイズをしましょう。

Buttonを表示してみる

Container部分と const styles部分をご自身のプロジェクトにコピーしてください。

そのままコピーする場合は、NativeBaseSampleの部分をご自身が作成したプロジェクト名に変更してください。

// 今回試しに「NativeBaseSample」クラスとしましたが、ご自身のプロジェクト名に変更すれば大丈夫です。
export default class NativeBaseSample extends Component {
  render() {
    return (
      <Container>
          <Content style={styles.buttonLocation}>
              <Button light><Text> Light </Text></Button>
              <Button primary><Text> Primary </Text></Button>
              <Button success><Text> Success </Text></Button>
              <Button info><Text> Info </Text></Button>
              <Button warning><Text> Warning </Text></Button>
              <Button danger><Text> Danger </Text></Button>
              <Button dark><Text> Dark </Text></Button>
          </Content>
      </Container>
    );
  }
}

const styles = {
  buttonLocation: {
    paddingTop: 100,
  },
};

AppRegistry.registerComponent('NativeBaseSample', () => NativeBaseSample);

何種類かのボタンを配置してみました。

確認してみる

NativeBaseを読み込みUIができたら、確認してみましょう。

// 自身で作成したreact native プロジェクトのディレクトリで実行
$ react-native run-ios or react-native run-android

↓いくつかのボタンが色違いで表示されれば完了です。

GitHub:https://github.com/Yurith/NativeBaseSample

他にもこんなことができるらしい

NativeBase公式サイトではコンポーネント単位で、Card / Form / CheckBox / Header / Footer / Listなど様々なサンプルコードがあるため、自身のプロジェクトに導入する際も基本的にはサンプルを真似して、個別に変更したいデザインは、スタイルシートで調整するのが良さそうです。

↓NativeBase Components集
http://docs.nativebase.io/Components.html#Components

英語ですが、ドキュメントは充実しています。