React Native(Expo)中检测App关闭状态的解决方案求助

核心问题在于：当App被完全关闭（非后台运行）时，JS环境已销毁，纯JS层面的生命周期方法（如ComponentWillUnmount）、AppState监听都无法触发。必须结合Expo提供的原生能力与服务器端兜底方案来解决。

跨平台解决方案 #

1. 服务器端兜底（最可靠） #

设置超时机制：若服务器在N分钟内未收到用户的位置数据，自动将userState标记为离线。这能避免客户端因完全关闭无法发送请求导致的状态不一致问题。

2. 客户端优化（分平台处理） #

Android 端处理

利用expo-task-manager注册定位任务，在任务内部实时检查App是否仍在运行，若检测到App已关闭，立即停止定位并发送离线状态：

import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';
import { AppState } from 'react-native';

const LOCATION_TASK_NAME = 'background-location-task';

// 定义定位任务
TaskManager.defineTask(LOCATION_TASK_NAME, async ({ data, error }) => {
  if (error) {
    console.error('定位任务异常:', error);
    return;
  }
  if (data) {
    let isAppRunning = true;
    // 尝试获取App状态，失败则判定为已关闭
    try {
      const appState = await AppState.getAsync();
      isAppRunning = appState !== 'not-running';
    } catch (e) {
      isAppRunning = false;
    }

    if (!isAppRunning) {
      // 停止位置更新
      await Location.stopLocationUpdatesAsync(LOCATION_TASK_NAME);
      // 发送离线状态到服务器
      await fetch('你的服务器接口地址', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userState: 'offline' })
      });
      return;
    }

    // 正常发送位置数据
    const { locations } = data;
    await fetch('你的位置上报接口', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ location: locations[0] })
    });
  }
});

// 启动定位任务（在App初始化时调用）
async function startLocationTracking() {
  const permission = await Location.requestBackgroundPermissionsAsync();
  if (permission.status === 'granted') {
    await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
      accuracy: Location.Accuracy.High,
      timeInterval: 10000,
      distanceInterval: 10,
      foregroundService: {
        notificationTitle: '定位中',
        notificationBody: '正在获取您的位置'
      }
    });
  }
}

iOS 端处理

iOS上App被手动关闭后，后台任务会被系统终止，因此需在App进入后台时立即尝试发送离线请求并停止定位：

import { AppState } from 'react-native';
import * as Location from 'expo-location';
import * as Device from 'expo-device';

let appStateListener;

// 监听App状态变化
function setupAppStateMonitor() {
  appStateListener = AppState.addEventListener('change', async (state) => {
    if (state === 'background' && Device.osName === 'iOS') {
      try {
        // 发送离线状态
        await fetch('你的服务器接口地址', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ userState: 'offline' })
        });
        // 停止定位更新
        await Location.stopLocationUpdatesAsync('background-location-task');
      } catch (e) {
        console.error('后台发送离线请求失败:', e);
      }
    } else if (state === 'active') {
      // App回到前台，重新启动定位
      await startLocationTracking();
    }
  });
}

// 在根组件中初始化监听
// useEffect(() => {
//   setupAppStateMonitor();
//   return () => appStateListener?.remove();
// }, []);

关键注意事项 #

• Expo后台任务有时间限制：Android单任务最多执行10分钟，iOS最多30秒，需确保任务逻辑简洁高效。
• iOS上App被手动关闭后，无法保证离线请求一定能发送成功，因此服务器端的超时兜底是必须的。

内容的提问来源于stack exchange，提问作者Daniel Dias