【React Native】NativeBase導入

-
【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

コメント

コメントを投稿