React Native Navigation如何检测入栈路由之间的后退导航行为？

现有代码失效根因 #

你尝试的导航索引监听方案失效的核心原因是：navIndex为Ref对象，其引用地址始终保持稳定，useEffect无法检测到Ref内部存储值的变更，因此仅前向导航时的组件挂载会触发回调，后退操作不会触发依赖更新。

可行实现方案 #

方案1：使用官方useFocusEffect钩子（最推荐，适配多实例同组件场景） #

这是React Navigation官方为屏幕聚焦/失焦场景专门设计的API，无论前进入栈、后退回退、标签切换，只要屏幕变为可见状态就会触发回调，完美适配多个同组件实例携带不同参数入栈的场景（比如不同个人主页跳转）。

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

// 屏幕组件内部
useFocusEffect(
  useCallback(() => {
    // 屏幕进入可见状态时触发的操作，比如根据当前路由参数拉取对应数据
    console.log('当前屏幕聚焦，路由参数：', route.params);
    return () => {
      // 屏幕离开可见状态时触发的清理操作，非必填
      console.log('当前屏幕失焦');
    };
  }, [route.params]) // 路由参数作为依赖，避免同组件不同参数场景下的逻辑误触发
);

该方案无需自定义返回键，也不需要手动维护导航状态，原生适配所有导航操作。

方案2：监听导航focus/blur事件 #

如果需要更灵活的事件控制逻辑，可以直接给navigation实例绑定聚焦、失焦事件监听器：

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

// 屏幕组件内部
const navigation = useNavigation();

useEffect(() => {
  // 绑定聚焦事件
  const onFocus = navigation.addListener('focus', () => {
    console.log('屏幕被激活');
  });
  // 绑定失焦事件
  const onBlur = navigation.addListener('blur', () => {
    console.log('屏幕被隐藏');
  });

  // 组件卸载时移除监听器，避免内存泄漏
  return () => {
    onFocus();
    onBlur();
  };
}, [navigation, route.params]);

方案3：修正导航索引监听逻辑 #

如果需要保留全局导航索引监听的逻辑，调整原有代码的依赖项即可，不需要把索引存入Ref：

import { useNavigationState } from '@react-navigation/native';
import { useEffect } from 'react';

// 直接获取导航索引，该值会在导航状态变化时自动更新
const currentNavIndex = useNavigationState(state => state.index);

useEffect(() => {
  console.log('当前导航索引：', currentNavIndex);
  // 可在此处补充路由名称匹配等逻辑，判断是否需要触发对应操作
}, [currentNavIndex, route.params]);

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