React Native中AppState监听器跳转页面后仍运行问题求解

问题核心：通过navigation.reset跳转到ScreenB后，ScreenA的AppState监听器未被正确移除，可能是组件未触发卸载清理，或监听器未与屏幕可见状态绑定。

方案一：先排查清理函数是否执行 #

先给清理函数加日志，确认ScreenA卸载时是否触发了监听器移除：

useEffect(() => {
    const appStateListener = AppState.addEventListener('change', state => console.log(state));
    return () => {
        console.log('ScreenA 卸载中，移除AppState监听器');
        appStateListener.remove();
    };
}, []);

如果控制台没打印这条日志，说明ScreenA没被导航栈完全移除，要检查你的路由配置，确保navigation.reset确实把ScreenA从栈里清掉了（比如嵌套导航的结构是否正确）。

方案二：结合导航焦点管理监听器（更可靠） #

不管组件是否卸载，通过监听屏幕的聚焦/失焦状态，只在屏幕可见时保留监听器，彻底避免残留：

import React, { useEffect } from "react"
import { Button, AppState } from "react-native"
import { MainRoutes } from "../../navigation/routes"

const ScreenA = ({ navigation }) => {
    let appStateListener;

    useEffect(() => {
        // 屏幕聚焦时注册监听器
        const handleFocus = () => {
            appStateListener = AppState.addEventListener('change', state => console.log(state));
        };

        // 屏幕失焦时移除监听器
        const handleBlur = () => {
            if (appStateListener) {
                appStateListener.remove();
            }
        };

        // 订阅导航的焦点/失焦事件
        const focusSub = navigation.addListener('focus', handleFocus);
        const blurSub = navigation.addListener('blur', handleBlur);

        // 初始加载时如果屏幕已经聚焦，直接注册监听器
        if (navigation.isFocused()) {
            handleFocus();
        }

        // 组件卸载时清理所有订阅和监听器
        return () => {
            focusSub();
            blurSub();
            if (appStateListener) {
                appStateListener.remove();
            }
        };
    }, [navigation]);

    return (
        <Button
            title={"Next"}
            onPress={() => {
                navigation.reset({
                    index: 0,
                    routes: [{ name: MainRoutes.ScreenB }],
                })
            }} />
    )
}

export default ScreenA

这种方式不管是reset跳转、返回还是切到其他屏幕，只要当前屏幕失焦，监听器就会被移除，完全杜绝残留问题。

额外排查点 #

• 如果你给ScreenA套了React.memo，暂时移除试试，可能导致组件未正确卸载。
• 检查React Navigation版本，若有已知bug，升级到最新稳定版。

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