React Native中AppState监听清除后仍在其他页面触发的问题

你的问题核心在于：切换到其他页面时，原页面组件可能并未真正卸载（比如React Navigation栈导航中，push新页面时旧页面仅被隐藏而非卸载），导致useEffect的清理函数未执行，AppState监听器一直生效。另外，React Native 0.64.x的AppState API存在少量已知的事件清理不彻底的问题，但最常见的诱因还是导航生命周期的匹配错误。

解决方案一：结合React Navigation焦点状态管理监听器 #

使用useFocusEffect替代普通useEffect，它会在页面获得焦点时绑定监听器，失去焦点时自动执行清理，完美适配导航场景：

import { useFocusEffect } from '@react-navigation/native';
import { AppState, useRef } from 'react';

const MyRoute = ({ navigation, route }) => {
  const appStateRef = useRef(AppState.currentState);

  useFocusEffect(
    React.useCallback(() => {
      getUserData();

      const updateRouteData = (nextAppState) => {
        if (appStateRef.current.match(/inactive|background/) && nextAppState === 'active') {
          getRoutes();
        }
        appStateRef.current = nextAppState;
      };

      AppState.addEventListener('change', updateRouteData);

      return () => {
        AppState.removeEventListener('change', updateRouteData);
      };
    }, [])
  );

  // ...其他逻辑
};

解决方案二：手动监听导航模糊/焦点事件 #

如果不想引入useFocusEffect，可以直接监听导航的blur（页面失去焦点）和focus（页面获得焦点）事件，手动控制监听器的添加与移除：

import { AppState, useRef, useEffect } from 'react';

const MyRoute = ({ navigation, route }) => {
  const appStateRef = useRef(AppState.currentState);
  let updateRouteData;

  useEffect(() => {
    getUserData();

    updateRouteData = (nextAppState) => {
      if (appStateRef.current.match(/inactive|background/) && nextAppState === 'active') {
        getRoutes();
      }
      appStateRef.current = nextAppState;
    };

    // 初始添加监听器
    AppState.addEventListener('change', updateRouteData);

    // 页面失去焦点时移除监听器
    const unsubscribeBlur = navigation.addListener('blur', () => {
      AppState.removeEventListener('change', updateRouteData);
    });

    // 页面重新获得焦点时添加监听器
    const unsubscribeFocus = navigation.addListener('focus', () => {
      AppState.addEventListener('change', updateRouteData);
    });

    // 组件卸载时清理所有监听
    return () => {
      AppState.removeEventListener('change', updateRouteData);
      unsubscribeBlur();
      unsubscribeFocus();
    };
  }, [navigation]);

  // ...其他逻辑
};

补充：确保监听器引用一致 #

如果上述方案仍有问题，可将监听器函数存入useRef，确保添加和移除的是同一个函数引用，规避RN旧版本的API小bug：

import { AppState, useRef, useEffect } from 'react';

const MyRoute = ({ navigation, route }) => {
  const appStateRef = useRef(AppState.currentState);
  const updateRouteDataRef = useRef(null);

  useEffect(() => {
    getUserData();

    updateRouteDataRef.current = (nextAppState) => {
      if (appStateRef.current.match(/inactive|background/) && nextAppState === 'active') {
        getRoutes();
      }
      appStateRef.current = nextAppState;
    };

    AppState.addEventListener('change', updateRouteDataRef.current);

    return () => {
      AppState.removeEventListener('change', updateRouteDataRef.current);
    };
  }, []);

  // ...其他逻辑
};

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