React Native中利用AppState区分应用首次启动与从后台唤醒

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

const AppStateDetector = () => {
  // 将初始状态设置为 'startup'，用于标识应用首次启动
  const [appState, setAppState] = useState('startup');

  useEffect(() => {
    // 监听 AppState 变化
    const appStateListener = AppState.addEventListener('change', nextAppState => {
      console.log('App State changed to:', nextAppState);
      setAppState(nextAppState);

      if (nextAppState === 'background') {
        console.log('应用进入后台模式');
        // 执行进入后台时的逻辑，例如暂停服务、保存数据
      } else if (nextAppState === 'active') {
        console.log('应用进入前台模式');
        // 执行进入前台时的逻辑，例如恢复服务、刷新数据
        // 注意：此时 appState 已经更新为 'active'
      }
    });

    // 组件卸载时移除监听器，防止内存泄漏
    return () => {
      appStateListener?.remove();
    };
  }, []); // 空依赖数组确保 useEffect 只在组件挂载时运行一次

  return (
    <View style={styles.container}>
      <Text style={styles.stateText}>当前应用状态: {appState}</Text>
      {appState === 'startup' && (
        <Text style={[styles.messageText, styles.startupMessage]}>
          这是应用首次启动！
        </Text>
      )}
      {appState === 'active' && (
        <Text style={[styles.messageText, styles.activeMessage]}>
          应用已在前台运行。
        </Text>
      )}
      {appState === 'background' && (
        <Text style={[styles.messageText, styles.backgroundMessage]}>
          应用已进入后台。
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  stateText: {
    fontSize: 22,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold',
  },
  messageText: {
    fontSize: 18,
    textAlign: 'center',
    marginHorizontal: 20,
    marginTop: 15,
    padding: 10,
    borderRadius: 8,
    overflow: 'hidden', // Ensures border-radius is visible
  },
  startupMessage: {
    color: '#FFFFFF',
    backgroundColor: '#28a745', // Green for startup
  },
  activeMessage: {
    color: '#FFFFFF',
    backgroundColor: '#007bff', // Blue for active
  },
  backgroundMessage: {
    color: '#FFFFFF',
    backgroundColor: '#dc3545', // Red for background
  },
});

export default AppStateDetector;