React Native如何区分应用完全关闭与后台运行并触发不同函数？

AppState本身确实无法直接区分应用进入后台和被完全关闭的场景，但可以通过以下几种方式实现区分：

1. 定时器结合启动状态标记（快速实现） #

核心思路：应用进入后台时启动一个定时器，若只是后台挂起，下次回到前台时会清除定时器；若被完全关闭，定时器不会触发，且下次启动时可通过标记判断是首次启动。

代码示例： #

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

function AppStateHandler() {
  const [appState, setAppState] = useState(AppState.currentState);
  let backgroundTimer = null;

  useEffect(() => {
    const checkFirstLaunch = async () => {
      const hasLaunched = await AsyncStorage.getItem('hasLaunched');
      if (!hasLaunched) {
        // 触发应用完全关闭后重启的逻辑
        handleAppTerminated();
        await AsyncStorage.setItem('hasLaunched', 'true');
      }
    };
    checkFirstLaunch();

    const handleAppStateChange = async (nextAppState) => {
      if (appState === 'active' && nextAppState.match(/inactive|background/)) {
        // 进入后台，启动定时器
        backgroundTimer = setTimeout(() => {
          // 定时器触发说明应用长时间在后台（可根据需求调整时间）
          handleLongBackground();
        }, 30000); // 30秒示例
      }

      if (appState.match(/inactive|background/) && nextAppState === 'active') {
        // 回到前台，清除定时器
        if (backgroundTimer) {
          clearTimeout(backgroundTimer);
          backgroundTimer = null;
        }
        // 触发从后台返回的逻辑
        handleAppResume();
      }

      setAppState(nextAppState);
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);
    return () => {
      subscription.remove();
      if (backgroundTimer) clearTimeout(backgroundTimer);
    };
  }, [appState]);

  const handleAppTerminated = () => {
    console.log('应用完全关闭后重启');
    // 你的业务逻辑
  };

  const handleAppResume = () => {
    console.log('从后台回到前台');
    // 你的业务逻辑
  };

  const handleLongBackground = () => {
    console.log('应用长时间处于后台');
    // 可选：处理后台超时逻辑
  };

  return null;
}

2. 原生模块监听系统终止事件（最准确） #

原生系统能直接捕获应用被完全终止的事件，通过原生模块将事件传递给RN端，是最可靠的方案。

iOS端实现（Swift示例）： #

在AppDelegate.swift中添加终止监听：

import UIKit
import React

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?
  var bridge: RCTBridge!

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // 初始化RN桥接等代码...
    NotificationCenter.default.addObserver(self, selector: #selector(appWillTerminate), name: UIApplication.willTerminateNotification, object: nil)
    return true
  }

  @objc func appWillTerminate() {
    // 发送事件给RN
    bridge.eventDispatcher.sendAppEvent(withName: "AppWillTerminate", body: nil)
  }
}

Android端实现（Kotlin示例）： #

在MainActivity.kt中重写onDestroy方法：

import android.os.Bundle
import com.facebook.react.ReactActivity
import com.facebook.react.modules.core.DeviceEventManagerModule

class MainActivity : ReactActivity() {
  override fun getMainComponentName(): String {
    return "YourAppName"
  }

  override fun onDestroy() {
    super.onDestroy()
    // 发送事件给RN
    reactInstanceManager?.currentReactContext?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)?.emit("AppWillTerminate", null)
  }
}

RN端监听事件： #

import { NativeEventEmitter, NativeModules } from 'react-native';
import { useEffect } from 'react';

function AppTerminationHandler() {
  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.RCTDeviceEventEmitter);
    const subscription = eventEmitter.addListener('AppWillTerminate', () => {
      console.log('应用即将被完全关闭');
      // 你的终止逻辑
    });

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

  return null;
}

3. AsyncStorage记录状态轨迹 #

通过存储记录应用进入后台的时间，下次启动时对比时间差或检查状态记录，判断是否是完全关闭后重启：

• 进入后台时，存储{ lastBackgroundTime: Date.now(), isInBackground: true }
• 回到前台时，更新存储为{ isInBackground: false }
• 应用启动时，读取存储：若isInBackground为true且当前时间与lastBackgroundTime差过大，说明应用被完全关闭；若没有存储记录，也视为首次启动（完全关闭后重启）

注意事项 #

• iOS后台挂起时，定时器可能被系统暂停，时间判断存在误差，原生方案更可靠
• Android不同厂商对后台的限制不同，需测试兼容性

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