【React Native】React Navigationでコンポーネント内でヘッダーにボタンを追加する

ちょっと躓いたので備忘録としてまとめ。
React Navigation で、ヘッダーにボタンを追加する方法についてです。

まず、React Navigation の公式サイトに掲載されているサンプルコードはこちら。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

これでもボタンは追加できるのですが、問題はボタンをクリックした時に実行する処理の指定方法についてです。
たとえば、ヘッダーのボタンをタップした時にデータを保存する処理を行わせたい時、その処理はコンポーネントに記述していたのでそれを呼び出したかったのですが…上記の方法ではそれをどこに書くべきかが分かりませんでした。

で、それを実現する方法について、参考にさせていただいた記事はこちら。

React Navigation で、StackNavigator のイベントを現在の Screen 上でハンドルする – Qiita
https://qiita.com/acro5piano/items/616650ad431229dc6097

正に私がやりたいことがそのまま紹介されていました…！

実際に記述した処理はこちら。

componentDidMount() {
  this.props.navigation.setOptions({
    headerRight: () => (
      <TouchableOpacity onPress={() => this.props.navigation.push('edit')}>
        <FontAwesome5 name="pen" size={18} color="#F08300" />
      </TouchableOpacity>
    ),
  });
}

コンポーネントの componentDidMount() でヘッダー右に表示するボタンと、そのボタンをタップした時の処理を指定しています。
今回は、ボタンタップ時の処理にページ遷移する処理を指定しましたが、データの保存だったり、ダイアログを表示させたりだったり、他の処理を指定することも可能です。

また、今回はヘッダー右のボタンの追加を行いましたが、ヘッダータイトルを変更したり、ヘッダー左にボタンを追加したりすることもできます。
なお、ヘッダーを変更したい場合は下記のように記述します。

this.props.navigation.setOptions({
  title: 'ヘッダータイトル'
});

やり方としては以上です。
私はちょっと古い書き方をしているので、サンプルコードを読み解くのに少し苦労してしまいましたが、何とか実装できてよかったです。

以上、React Navigation で、コンポーネント内でヘッダーにボタンを追加する方法についてでした。
ご参考になれば幸いです。