NativeBase

NativeBase は React Native で使用できるUIコンポーネントです。 iOS/Android それぞれに適切なUIを提供し、汎用性のあるコンポーネントを簡単に導入できます。

環境構築

作成したプロジェクトに対して以下のコマンドでNativeBaseを導入します。

$ npm install native-base --save

以下のようなメッセージが出てインストールが完了します。

┌────────────────────────────────────────────────────────────────────────────────────────────┐
│ NativeBase 2.0 has been succesfully installed!                                             │
│ Run `node node_modules/native-base/ejectTheme.js` to copy over theme config and variables. │
│ Head over to the docs for detailed information on how to make changes to the theme.        │
└────────────────────────────────────────────────────────────────────────────────────────────┘

※ 公式サイトなどではこれでOKのはずですが、以降の作業でうまくいかなかったので、下記コマンドを再度実行することで、インストールが最終的な完了状態となるようです。

$ npm install

続いて、以下のコマンドで NativeBase が iOS/Android プロジェクトに「リンクが必要」であることを指定します。

$ react-native link

参考："react-native link" は何をするか
https://qiita.com/lazyppp/items/8d5969cd9a5b53587e18

アプリ作成

App.js を以下のように書き換えて NativeBase のコンポーネントが使用可能なことを確認します。（「Headerコンポーネント」でiOSでのナビゲーションバー、Androidでのアプリバーを表示してみます）

import React, {Component} from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            <Title>タイトル</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

iOS

Android

リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseNativebase

【React Native】NativeBase導入

NativeBase

環境構築

アプリ作成

iOS

Android

リポジトリ