React Native 之 AppState（应用状态）（二十二）

AppState 是 React Native 提供的一个 API，用于监听应用在前台、后台或未激活状态之间的切换。这对于管理应用的资源、调整应用的界面显示或响应系统事件（如来电）等场景非常有用。

AppState 模块通过监听系统广播的意图（Intents）或应用生命周期事件来实现其功能。当应用的状态发生变化时（例如，用户切换到另一个应用或返回到主屏幕），系统会发送一个相应的意图或事件。AppState 模块捕获这些事件，并通过其提供的 API 将状态变化通知给应用。

import React, { useEffect } from 'react';  
import { AppState, Text, View, StyleSheet } from 'react-native';  
  
const AppStateExample = () => {  
  const handleAppStateChange = (nextAppState) => {  
    if (nextAppState === 'active') {  
      console.log('App has come to the foreground!');  
    } else if (nextAppState === 'background') {  
      console.log('App has gone to the background!');  
    } else if (nextAppState === 'inactive') {  
      console.log('App is in an inactive state!');  
    }  
  };  
  
  useEffect(() => {  
    const subscription = AppState.addEventListener('change', handleAppStateChange);  
  
    // 清理函数，确保在组件卸载时移除监听器  
    return () => {  
      subscription.remove();  
    };  
  }, []); // 空依赖数组确保 effect 只在组件挂载和卸载时运行  
  
  return (  
    <View style={styles.container}>  
      <Text>Open the app switcher (double tap home button) and check the console to see the logs.</Text>  
    </View>  
  );  
};  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
  },  
});  
  
export default AppStateExample;