JavaScript
Android
iOS
reactnative

【React Native】NativeBase導入


NativeBase

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

https://github.com/GeekyAnts/NativeBase


環境構築

作成したプロジェクトに対して以下のコマンドで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

ios.png


Android

android.png


リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。

https://github.com/k-neo/ReactNativeCourseNativebase