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

【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 で、遷移元のページがフォーカスされた時に実行する処理を指定する方法でした。
ご参考になれば幸いです。

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