如何在React Navigation Tab导航中判断页面是否已离开？

嘿，这个问题我之前也踩过坑！确实，React Navigation的Tab导航为了优化性能，切换页面时不会卸载未激活的组件，所以传统的componentWillUnmount（或者函数组件里的useEffect清理函数）根本不会触发。不过别担心，React Navigation提供了专门的API来处理这种场景，给你两个实用的解决方案：

方案一：使用useFocusEffect钩子（推荐） #

这个钩子是React Navigation专门为屏幕焦点变化设计的，完美适配你的需求——当Screen A获得焦点时启动计时器，失去焦点时自动停止。

代码示例：

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

function ScreenA() {
  // 用useRef保存计时器实例，避免重复创建
  const timerRef = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      // 屏幕聚焦时启动计时器
      timerRef.current = setInterval(() => {
        console.log("计时器正在运行...");
        // 这里放你的计时器逻辑
      }, 1000);

      // 返回的函数会在屏幕失焦或组件卸载时执行，用来清理计时器
      return () => {
        clearInterval(timerRef.current);
        console.log("计时器已停止");
      };
    }, []) // 空依赖数组确保只执行一次
  );

  return (
    // 你的Screen A页面内容
  );
}

useFocusEffect的好处是它会自动关联屏幕的焦点状态，不需要手动监听导航事件，逻辑更清晰。

方案二：监听导航的blur事件 #

如果你更习惯手动监听导航状态，可以用navigation.addListener来监听blur事件——这个事件会在屏幕不再处于活跃状态时触发（比如切换到Screen B）。

代码示例：

import { useNavigation } from '@react-navigation/native';
import { useEffect, useRef } from 'react';

function ScreenA() {
  const timerRef = useRef(null);
  const navigation = useNavigation();

  useEffect(() => {
    // 初始化计时器
    timerRef.current = setInterval(() => {
      console.log("计时器正在运行...");
    }, 1000);

    // 添加失焦监听：当屏幕离开时停止计时器
    const unsubscribeBlur = navigation.addListener('blur', () => {
      clearInterval(timerRef.current);
      console.log("计时器已停止");
    });

    // 组件卸载时记得移除监听，避免内存泄漏
    return () => {
      unsubscribeBlur();
      clearInterval(timerRef.current); // 双重保险
    };
  }, []);

  return (
    // 你的Screen A页面内容
  );
}

补充说明 #

为什么componentWillUnmount没用？因为Tab导航会把未激活的页面保留在内存中，只是隐藏起来，并没有卸载组件，所以那些卸载阶段的生命周期钩子不会被调用。必须借助React Navigation提供的焦点/导航状态相关API，才能准确捕捉到页面“离开”的时机。

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