React Native Android端appState失效（前后台/非活跃态）及关闭方案咨询

由于Android和iOS的应用生命周期机制差异，AppState无法在Android端精准捕捉应用关闭场景，以下是几种可行的解决方案：

方案一：通过BackHandler处理物理返回键退出场景 #

Android用户常通过物理返回键主动退出应用，可实现连续按两次返回键退出的逻辑，同时触发关闭前的操作：

import { BackHandler, ToastAndroid } from 'react-native';
import { useEffect, useState } from 'react';

export default function App() {
  const [lastBackPressed, setLastBackPressed] = useState(0);

  useEffect(() => {
    const backAction = () => {
      const currentTime = new Date().getTime();
      // 两次点击间隔小于2秒则执行退出
      if (currentTime - lastBackPressed < 2000) {
        console.log('应用即将关闭，执行清理操作');
        // 这里可加入数据保存、状态清理逻辑
        BackHandler.exitApp();
        return false;
      } else {
        ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
        setLastBackPressed(currentTime);
        return true;
      }
    };

    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
    return () => backHandler.remove();
  }, [lastBackPressed]);

  return (/* 你的组件内容 */);
}

说明：此方案覆盖用户主动按返回键退出的场景，BackHandler.exitApp()会直接终止应用进程。

方案二：原生模块监听Android Activity生命周期事件 #

若需监听用户从最近任务列表关闭应用、系统因资源杀死应用的场景，需通过原生Android模块实现：

步骤1：创建原生Module #

在Android项目包目录下创建AppCloseModule.java：

package com.yourappname; // 替换为你的应用包名

import android.app.Activity;
import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class AppCloseModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;

    public AppCloseModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @Override
    public String getName() {
        return "AppCloseModule";
    }

    private static void sendEvent(String eventName, WritableMap params) {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName, params);
    }

    // 监听应用被从最近任务列表移除事件
    @Override
    public void onTaskRemoved(Intent rootIntent) {
        super.onTaskRemoved(rootIntent);
        WritableMap params = Arguments.createMap();
        params.putString("reason", "task_removed");
        sendEvent("AppWillClose", params);
        // 原生层可在此执行清理操作
    }

    // 监听Activity销毁事件
    @Override
    public void onActivityDestroyed(Activity activity) {
        super.onActivityDestroyed(activity);
        WritableMap params = Arguments.createMap();
        params.putString("reason", "activity_destroyed");
        sendEvent("AppWillClose", params);
    }
}

步骤2：注册Module #

修改MainApplication.java的getPackages方法：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new AppCloseModule(reactContext));
            return modules;
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    });
    return packages;
}

步骤3：JS层监听事件 #

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

const { AppCloseModule } = NativeModules;
const appCloseEmitter = new NativeEventEmitter(AppCloseModule);

export default function App() {
  useEffect(() => {
    const subscription = appCloseEmitter.addListener(
      'AppWillClose',
      (event) => {
        console.log('应用即将关闭，原因：', event.reason);
        // JS层执行数据保存、状态清理逻辑
      }
    );
    return () => subscription.remove();
  }, []);

  return (/* 你的组件内容 */);
}

说明：onTaskRemoved覆盖用户从最近任务列表关闭应用的场景；onActivityDestroyed覆盖Activity销毁的场景，是Android端最可靠的关闭监听方式。

方案三：AppState + BackHandler 补充处理 #

结合AppState判断应用前后台状态，配合BackHandler覆盖主动退出场景：

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

export default function App() {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      if (appState === 'active' && nextAppState.match(/inactive|background/)) {
        console.log('应用进入后台');
      } else if (appState.match(/inactive|background/) && nextAppState === 'active') {
        console.log('应用回到前台');
      }
      setAppState(nextAppState);
    };

    const appStateSubscription = AppState.addEventListener('change', handleAppStateChange);
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      // 判断是否在根页面，再决定是否退出
      console.log('用户触发返回键');
      return false; // 返回false允许默认退出行为，true则拦截
    });

    return () => {
      appStateSubscription.remove();
      backHandler.remove();
    };
  }, [appState]);

  return (/* 你的组件内容 */);
}

注意事项 #

• Android没有绝对的"应用关闭"事件，系统可能在后台静默杀死应用且不通知JS层，建议关键数据实时保存。
• BackHandler.exitApp()在Android 10及以上版本需在应用前台调用才有效。

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