React Native中区分应用首次启动与从后台唤醒的策略

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

const AppStateMonitor = () => {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const appStateListener = AppState.addEventListener('change', nextAppState => {
      console.log('App State Changed:', nextAppState);
      setAppState(nextAppState);

      if (nextAppState === 'background') {
        // 应用进入后台
        console.log('App entered background mode');
      } else if (nextAppState === 'active') {
        // 应用进入前台 (可能是首次启动，也可能是从后台唤醒)
        console.log('App entered foreground mode');
      }
    });

    return () => {
      appStateListener?.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Current App State: {appState}</Text>
    </View>
  );
};

export default AppStateMonitor;

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

/**
 * AppStateMonitor 组件用于演示如何区分应用首次启动与从后台唤醒。
 */
const AppStateMonitor = () => {
  // 使用 'startup' 作为初始状态，明确标识应用首次启动阶段。
  const [appState, setAppState] = useState('startup');
  // useRef 用于在 useEffect 内部访问最新的 appState 值，避免闭包问题。
  const appStateRef = useRef(appState);

  useEffect(() => {
    // 更新 ref 以始终指向最新的 appState 值
    appStateRef.current = appState;
  }, [appState]);

  useEffect(() => {
    console.log('Component mounted. Initial appState:', appStateRef.current);

    // 注册 AppState 监听器
    const appStateListener = AppState.addEventListener('change', nextAppState => {
      console.log('App State Changed from', appStateRef.current, 'to', nextAppState);
      setAppState(nextAppState);

      if (nextAppState === 'background') {
        console.log('行为: 应用进入后台');
        // 在这里执行应用进入后台时的逻辑
      } else if (nextAppState === 'active') {
        // 判断是首次启动后的 active 还是从 background 唤醒的 active
        if (appStateRef.current === 'startup' || appStateRef.current === 'background') {
          console.log('行为: 应用进入前台 (可能是首次启动或从后台唤醒)');
          // 如果是 'startup' 变为 'active'，则说明是首次启动完成。
          // 如果是 'background' 变为 'active'，则说明是从后台唤醒。
          if (appStateRef.current === 'startup') {
            console.log('事件: 应用首次启动完成并进入前台');
            // 在这里执行应用首次启动完成后的逻辑，例如加载初始数据、显示引导页
          } else if (appStateRef.current === 'background') {
            console.log('事件: 应用从后台唤醒并进入前台');
            // 在这里执行应用从后台唤醒时的逻辑，例如刷新数据、检查更新
          }
        }
      } else if (nextAppState === 'inactive') {
        // iOS 独有的状态，表示应用即将进入后台或前台，通常是过渡状态。
        console.log('行为: 应用处于非活跃状态 (inactive)');
      }
    });

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>应用状态监测</Text>
      <Text style={styles.stateText}>当前应用状态: <Text style={styles.highlight}>{appState}</Text></Text>
      {appState === 'startup' && (
        <Text style={styles.message}>应用正在首次启动中...</Text>
      )}
      {appState === 'active' && appStateRef.current === 'startup' && (
        <Text style={styles.message}>应用首次启动完成，进入前台。</Text>
      )}
      {appState === 'active' && appStateRef.current === 'background' && (
        <Text style={styles.message}>应用从后台唤醒，进入前台。</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  stateText: {
    fontSize: 18,
    marginBottom: 10,
    color: '#555',
  },
  highlight: {
    fontWeight: 'bold',
    color: '#007bff',
  },
  message: {
    fontSize: 16,
    color: '#666',
    marginTop: 10,
    textAlign: 'center',
  },
});

export default AppStateMonitor;