【React Native】React Navigationで前のページがフォーカスされた時の処理を追加する

ちょっと手こずったので備忘録としてまとめ。
React Navigation でページ遷移処理を実装しているアプリで、ページがフォーカスされた際に実行する処理を指定する方法についてです。
そもそも、なぜこの処理が必要なのかというと、例えば ページ A からページ B に移動した際、ページ A はページ B が表示されても、ページ自体は終了してはいないため、ページ A の componentWillUnmount() は呼ばれず、また ページ B から ページ A に戻った際も、ページ A の componentDidMount() が呼ばれないという現象が発生します。
で、現在私が開発しているアプリでは、トップページのナビゲーションバーにプロフィールアイコンを表示しているのですが、トップページから遷移した先のプロフィール修正ページでアイコン画像を変更後、そのページを閉じてトップページに戻っても、トップページの componentDidMount() が呼ばれないためプロフィール画像が変更されないという不具合が発生しました。
今回はこちらを修正するための方法です。

対処には公式サイトのこちらのページを参考にさせていただきました。

Call a function when focused screen changes | React Navigation
https://reactnavigation.org/docs/3.x/function-after-focusing-screen/

追加したコードは下記のとおりです。
まず、下記をインポートします。

import { withNavigation } from "react-navigation";

で、ページをエクスポートする際に、下記のようにページを withNavigation() で囲みます。

export default withNavigation(TopPage);

あとは、componentDidMount() と componentWillUnmount() に下記を追加します。

componentDidMount() {
  this.focusListener = navigation.addListener("focus", () => {
    // ページが再度フォーカスされたときに実行したい処理を記述
  });
}
componentWillUnmount() {
  this.focusListener.remove();
}

私の場合は、プロフィール画像を取得して、ナビゲーションバーに反映させるという処理を追加しました。
処理としては以上です！
なお、componentWillUnmount() の処理を記述しないと、メモリリークのワーニングが発生したので、必ず追加するようにしてください。

ちなみに、サンプルコードでは addListener の第一引数には didFocus と指定していましたが、私の環境では発火しなかったため focus に変更しています。
動作しない理由はまだわかっていないのですが…とりあえず動いたので一旦良しとします！

以上、React Navigation で、遷移元のページがフォーカスされた時に実行する処理を指定する方法でした。
ご参考になれば幸いです。