React Navigation：Tab Stack内点击Tab图标时如何检测屏幕失焦

问题核心 #

当处于Tab导航下的栈子屏幕时，点击Tab图标回到Tab首页，useIsFocused钩子未触发状态变化，导致无法清理屏幕内的定时器；同时直接在子屏幕内监听tabPress事件无效。

原因分析 #

1. useIsFocused在部分场景下（如Tab内栈页面切换回Tab首页），焦点状态的同步可能存在延迟，导致未触发副作用更新。
2. tabPress事件是发送给Tab导航器本身的，而非栈内的子屏幕，因此直接在子屏幕内监听该事件不会生效。

解决方案 #

方案一：使用focus/blur事件处理定时器（推荐） #

通过监听屏幕的focus和blur事件，覆盖所有屏幕焦点变化场景（包括点击Tab图标、切换Tab、跳转其他页面等），同时用useRef存储定时器ID避免异步更新问题。

修改后的代码：

function YourScreen() {
  const navigation = useNavigation();
  const refreshRef = useRef(null); // 用ref存储定时器ID，避免state异步更新问题

  const setUpdateQueries = () => {
    // 先清理旧定时器，防止重复创建
    if (refreshRef.current) {
      clearInterval(refreshRef.current);
    }
    refreshRef.current = setInterval(refetchFunction, 10000, "active");
    console.log(refreshRef.current);
  };

  useEffect(() => {
    // 屏幕获取焦点时启动定时器
    const unsubscribeFocus = navigation.addListener('focus', () => {
      setUpdateQueries();
    });

    // 屏幕失去焦点时清理定时器
    const unsubscribeBlur = navigation.addListener('blur', () => {
      console.log("Clearing", refreshRef.current);
      if (refreshRef.current) {
        clearInterval(refreshRef.current);
        refreshRef.current = null;
      }
    });

    // 组件卸载时清理监听和定时器
    return () => {
      unsubscribeFocus();
      unsubscribeBlur();
      if (refreshRef.current) {
        clearInterval(refreshRef.current);
      }
    };
  }, [navigation]);

  // ... 其他屏幕逻辑
}

方案二：监听Tab导航器的tabPress事件（额外处理Tab点击逻辑） #

如果需要在点击Tab图标时执行额外操作，可以通过获取Tab导航器实例来监听tabPress事件：

useEffect(() => {
  // 获取当前屏幕所属的Tab导航器实例
  const tabNavigation = navigation.getParent();
  if (!tabNavigation) return;

  const unsubscribeTabPress = tabNavigation.addListener('tabPress', () => {
    console.log("Tab图标被点击");
    // 清理定时器或执行其他逻辑
    if (refreshRef.current) {
      clearInterval(refreshRef.current);
      refreshRef.current = null;
    }
  });

  return unsubscribeTabPress;
}, [navigation]);

总结 #

优先使用focus/blur事件方案，因为它能覆盖所有屏幕焦点变化场景，且实现更简洁。使用useRef存储定时器ID可以避免useState异步更新导致的清理失败问题。

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