バックグラウンド→フォアグラウンドに戻った時に関数を実行する方法【expo】
abyblog
バックグラウンドからフォアグラウンドに戻ってきた時のユーザーの制御は必須です。
よくある例として、
アプリから別のアプリに遷移した後、元のアプリに戻ってきた時などに、ユーザーが期待している動作を行なっていない場合があります。
その時に、フォアグラウンドに戻ってきた時に、ユーザーの状態を取得・制御しておく必要があります。
この記事では、
バック→フォアの時に特定の関数を実行させる方法について紹介して行きます。
実際に私がシミュレーター・実機でテスト済みの内容になりますので、最後まで一緒に見て行きましょう。
目次（クリックで読みたい部分にジャンプできます）
【結論】バック→フォアで関数を実行するコード
まず結論からご紹介します。
ユーザーがバックグラウンドからフォアグラウンドに復帰した時に
関数を実行させるためには、以下のコードを書きます。
import { AppState } from "react-native";
const [appState, setAppState] = useState(AppState.currentState);
useEffect(() => {
const subscription = AppState.addEventListener("change", nextAppState => {
if (appState.match(/inactive|background/) && nextAppState === "active") {
console.log("アプリがフォアグラウンドに戻りました！");
//
// ここに実行したい関数を呼び出す
//
}
setAppState(nextAppState);
});
return () => {
subscription.remove();
};
}, [appState]);真ん中に、実行したい関数を書いてください。
コードの解説
useStateの使用
const [appState, setAppState] = useState(AppState.currentState);この行はuseStateフックを使用しています。
アプリの現在の状態を管理するための変数appStateを使用しています。
AppStateはアプリがバックグラウンドかフォアグラウンドかを判定しています。
AppStateのドキュメント AppState · React Native
AppState.currentStateで、アプリが起動した時の状態を初期値として設定しています。
useEffectの使用
useEffect(() => {
...
}, [appState]);useEffectは、コンポーネントのレンダリング後に副作用を実行するために使われます。
例えば、画面起動時などがそれにあたります。
また、特定の変数が変化したときに、それを監視することができます。
今回は、appStateを監視しており、appStateの値が変わるたびに、useEffect内のコードが実行される仕組みになっています。
AppState.addEventListernerの設定
const subscription = AppState.addEventListener("change", nextAppState => {
...
});AppState.addEventListernerとは、
AppStateで指定されたイベントの種類が発生するたびに呼び出される関数を設定できます。
今回は、「change」バックグラウンドとフォアグランドが入れ替わった時に、nextAppStateを実行するようにしています。
アプリがフォアグラウンドに戻った時のロジック
if (appState.match(/inactive|background/) && nextAppState === "active") {
console.log("アプリがフォアグラウンドに戻りました！");
...
}バックグラウンド⇄フォアグラウンドの時のうち、
バックグラウンド→フォアグラウンドの時に、指定した関数を実行するようにしています。
この中に好きな関数を入れましょう。
まとめ
バックグラウンド→フォアグラウンドの処理などは、
実装していくうちに必要になっていくトリガーの１つです。
他にも、バックボタンを押して画面に戻ってきた時にも関数を実行したい時などがあります。
この時も、今回と似たような関数を使いますが、一工夫必要です。
