ReactNativeでアプリがBackgroundに移行した時にイベント発火

取得できるアプリの状態

アプリの状態には以下の種類があります。

①background:　起動しているが、ホーム画面の状態
②inactive:　backgroundとforegoundの間の状態
③active:　foregound状態で実際にアプリの画面が表示されている状態

アプリがBackgroundに移行した時に発火

React NativeのAppStateを使用して取得する

import React, {useState, useEffect} from 'react';
import {AppState} from 'react-native';

const AppStateExample = () => {

  // AppState.currentStateで現在の状態を取得できる
  const [appState, setAppState] = useState(AppState.currentState);
  
  // AppState.addEventListenerでAppStateが変更された時に発火する
  useEffect(() => {
    AppState.addEventListener('change', _handleAppStateChange);

    return () => {
      AppState.removeEventListener('change', _handleAppStateChange);
    };
   }, []);

　
  const _handleAppStateChange = (nextAppState) => {
    setAppState(nextAppState);
    
    // ここをactiveやinactiveに変えることでそれぞれの状態の時に発火できる
    if (nextAppState === 'background') {
      console.log('バックグラウンド時に実行')
    }
  }
}