浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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に移行します。

  • この記事いいね! (0)