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