React Native 0.66 Android12：调出任务管理器时AppState change事件未触发

问题根源 #

Android12对应用生命周期回调逻辑做了调整：当用户调出任务管理器时，应用仅触发onPause而非onStop，而React Native 0.66的AppState组件仅在onStop/onStart阶段触发change事件，导致此时无法感知应用进入后台状态。同时Android12限制了应用关闭时的后台操作时长，依赖关闭触发的逻辑会出现执行不稳定的问题。

方法一：通过原生Module监听Activity生命周期 #

直接在Android原生层监听onPause和onResume回调，通过RN的事件桥接机制通知JS层，确保应用退至后台（包括调出任务管理器）时能及时触发数据保存逻辑。

1. 编写原生Android Module（Kotlin示例） #

创建AppLifecycleModule.kt文件：

package com.yourappname;

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;

class AppLifecycleModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String {
        return "AppLifecycleModule"
    }

    override fun onHostPause() {
        super.onHostPause()
        sendEvent("AppLifecycle", "pause")
    }

    override fun onHostResume() {
        super.onHostResume()
        sendEvent("AppLifecycle", "resume")
    }

    private fun sendEvent(eventName: String, state: String) {
        val params: WritableMap = Arguments.createMap()
        params.putString("state", state)
        reactApplicationContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
            .emit(eventName, params)
    }
}

创建AppLifecyclePackage.kt文件用于注册Module：

package com.yourappname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

class AppLifecyclePackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        val modules = ArrayList<NativeModule>()
        modules.add(AppLifecycleModule(reactContext))
        return modules
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return Collections.emptyList()
    }
}

在MainApplication.kt中注册Package：

override fun getPackages(): List<ReactPackage> {
    return PackageList(this).packages.apply {
        add(AppLifecyclePackage())
    }
}

2. JS层监听原生事件 #

替换原有的AppState监听逻辑，改为监听原生模块发送的生命周期事件：

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

const { AppLifecycleModule } = NativeModules;
const appLifecycleEmitter = new NativeEventEmitter(AppLifecycleModule);

componentDidMount() {
    // 移除原有AppState监听
    this.changeUnsubscribe?.();
    
    // 监听原生生命周期事件
    this.lifecycleSubscription = appLifecycleEmitter.addListener(
        'AppLifecycle',
        ({ state }) => {
            if (state === 'pause') {
                // 执行数据保存逻辑
                this.saveUserData();
                console.log('App entered background (including task manager)');
            } else if (state === 'resume') {
                console.log('App returned to foreground');
            }
        }
    );
}

componentWillUnmount() {
    this.lifecycleSubscription?.remove();
}

saveUserData() {
    // 你的数据保存逻辑，尽量轻量化
}

方法二：升级React Native版本 #

React Native在0.69及以上版本中修复了Android12下AppState的监听问题，若项目允许版本升级，可以直接升级后复用原有的AppState逻辑，无需额外开发原生模块。

注意事项 #

• Android12对后台操作有严格的时间限制，数据保存逻辑需尽量轻量化，避免耗时操作；必要时可使用Android原生的WorkManager处理延迟执行的任务。
• 测试需覆盖"调出任务管理器"、"按Home键"、"切换其他应用"等多种后台场景，确保数据保存逻辑稳定触发。

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