【React Native】アプリがバックグラウンドから復帰したことを検知する

今回は、React Native で、アプリがバックグラウンドから復帰したことを検知する方法についてです。
アプリがフォアグラウンドに戻ったタイミングで、ページの再読み込みを行いたい時などに使えます。

参考にさせていただいた記事はこちら。

ReactNativeでアプリがForeground,Backgroundに移行するEventを拾って何かしたい。 – Qiita
https://qiita.com/zaburo/items/33b441342f3b1c69a3de

実装には、React Native の AppState を使用します。
サンプルコードは下記の通りです。

import React from 'react';
import { AppState } from 'react-native';

class TopPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      appState: AppState.currentState,
    }
　　　　　　　　_handleAppStateChange = (nextAppState) => {
      this.setState({ appState: nextAppState });
      if (nextAppState === 'active') {
        // アプリがバックグラウンドから復帰した時に実行したい処理を記述
     　　}
    }
  }
  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }
  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }
  render() {
    return (
      /* 描画したいコンポーネント */
    );
  }
}

export default TopPage;

アプリのフォアグラウンド・バックグラウンド移動を検知しているのは、上記の 10〜15行目の処理です。
上記のページが描画されたタイミングで、addEventListner で関数を追加し、ページを離れたタイミングで removeEventListener を実行し、関数を削除しています。
なお、今回はバックグラウンドからフォアグラウンドに復帰した時だけを検知すればOKだったので、それしか記述していません。
それ以外を検知したい場合は、上で挙げた参考記事のサンプルコードをご参考ください。

実際に上記コードを実装したところ、問題なくアプリがバックグラウンドから復帰したタイミングで指定した処理が実行されました！
ただし、まだ iOS でしか動作確認していませんので、後ほど Android でも確認する予定です。

以上、React Native でアプリがバックグラウンドからフォアグラウンドに復帰したことを検知する方法についてでした。
ご参考なれば幸いです。