react-native-elementsの提供するヘッダーが簡単かつメンテが楽で作業が超捗る

react-native-elementsが提供してるヘッダーが使いやすかったので

使い方をおさらいしてみました。

まず、react-native-elementsをインストールしないとこのヘッダーは

使えないのでnpm i react-native-elementsをしてインストール。

ヘッダーには場所に応じてコンポーネントを設置するプロパティがあり、

そこにテキストやアイコンを指定するだけで簡単に表示してくれます。

import { Header } from 'react-native-elements';

<Header
  leftComponent={{ icon: 'menu', color: '#fff', iconStyle: { color: '#fff' } }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
/>

これだけでま流麗なヘッダーを作れます。一からヘッダーを作ってあれこれ

設定していたのがばかばかしく思えるくらい簡単でした。

他のコンポーネントを試して変なバグが無ければデフォルトのをやめて、全ての

コンポーネントをreact-native-elementsに移行します。