【Expo (React Native)】React NavigationのHeaderをやめてReact Native ElementsのHeaderを使う

React NavigationのHeaderを使っていたのですが、StateやらPropsと絡めていろいろやろうとすると面倒だったのでやめることにしました。

代わりにReact Native ElementsのHeaderコンポーネントを使うことにします。

react-native-elements.github.io

---

React NavigationのHeaderを非表示にする

まずはReact NavigationのHeaderを消します。

これはCreateStackするときに指定すれば簡単に消せる様子。こんな感じ。

const ChatStack = createStackNavigator({
  Chat: ChatScreen,
}, { headerMode: 'none' });

ただ、これだと同じStack内に複数Screenを追加した場合は全部Headerが出なくなります。

自分はそれでよかったんですが、一部だけ消したいときは以下のように書くらしいです。

const ChatStack = createStackNavigator({
  Chat: {screen : ChatScreen,
         {navigationOptions: () => ({
           header: null
         }), 
        },

qiita.com

---

React Native ElementsのHeaderを追加する

普通にImportしてrenderに書けば出ます。

公式サイトを見てください。

一つ気を付けるのは、React Native ElementsのHeaderコンポーネントはステータスバー（一番上の時間とか電波状況とか表示してるあれ）の分を加味してサイズ決定してくれるようなので、SafeAreaViewとか使っている場合はHeaderはSafeAreaViewの外にしてあげる必要があります。

Androidとかのいろんな画面の形だとどう表示されるのかな。

ノッチがあるやつとか。試してません。

とりあえずこれでStateとかPropsを直接Headerの中で使えるようになります。

バッジ付けたかったのが簡単になってよかった。