遷移先画面から戻った時に関数を実行する方法【ReactNative Expo】

遷移先画面から、Backボタンとかで戻った時に画面内を更新したい。関数を実行したい！

今回は、expoで遷移先画面から戻ってくる時に、関数を実行する方法を解説します。

戻った時に、画面内の要素が更新されているのに、関数が走らないせいで画面の要素を最新に更新できない場合があります。

そんな時に使える方法です。ぜひ使ってみてください！

コード

まず、以下をimport文に書いておきます。

import { useFocusEffect } from '@react-navigation/native';

ReactNavigationがインストールされていれば、使うことができます。

次に、更新したいページの中に以下のコードを書きます。

//Backボタンで戻ってきた時に動く。
useFocusEffect(
  React.useCallback(() => {
    // ここにフォーカスが戻ってきた時に実行したい処理を記述
    // 例: 関数の呼び出し
    console.log("画面に戻ってきた");
  }, [])
);

動かしたい関数などを書いておきましょう。

useFocusEffectは、対象の画面に戻ってきた時に実行されるものです。

Navigation上に表示されるBackボタン、Andoroid標準でついているBackボタン、iOSの左スワイプでも同様に動かすことができます。

まとめ

今回は、Backボタンなどで画面に戻ってきた時に、画面内の関数を実行する方法について紹介しました。

これで、Backボタンでの挙動時でも最新の情報を反映することができますね！

では、また！