如何在React Navigation中仅监听push和pop事件（排除其他操作）

问题场景 #

导航层级为底部标签页结构，每个标签页的根容器是Native Stack Navigator，需要在当前栈执行Push或Pop操作时触发自定义动画/过渡逻辑，但现有监听方式存在干扰：

• beforeRemove 仅能检测Pop类操作，无法捕获Push事件
• blur/focus/useFocusEffect 会在标签切换时触发，混入非栈操作事件
• 当前环境版本：

  React Native 0.72.4
  "@react-navigation/bottom-tabs": "^6.5.8",
  "@react-navigation/native": "6.1.7",
  "@react-navigation/native-stack": "6.9.13"
  

解决方案 #

1. 利用Native Stack Navigator的onStateChange监听栈长度变化 #

每个标签页的Native Stack是独立的，其onStateChange仅会响应当前栈的路由变化，标签切换不会触发该回调。通过对比栈的路由数量变化，即可精准判断Push/Pop操作：

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function TabStack() {
  // 保存上一次的栈路由数量
  let previousStackSize = 0;

  return (
    <Stack.Navigator
      onStateChange={(currentState) => {
        const currentStackSize = currentState.routes.length;

        // 排除模态框操作（如果模态框属于当前栈）
        const isModalOperation = currentState.routes.some(route => route.presentation === 'modal');
        if (isModalOperation) {
          previousStackSize = currentStackSize;
          return;
        }

        // 判断操作类型
        if (currentStackSize > previousStackSize) {
          // 触发Push操作逻辑
          console.log('执行Push操作');
          // 这里加入你的自定义动画代码
        } else if (currentStackSize < previousStackSize) {
          // 触发Pop操作逻辑
          console.log('执行Pop操作');
          // 这里加入你的自定义动画代码
        }

        // 更新上一次的栈长度
        previousStackSize = currentStackSize;
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
      {/* 其他屏幕 */}
    </Stack.Navigator>
  );
}

2. 自定义Hook监听当前栈状态变化 #

如果需要在单个屏幕组件内监听Push/Pop事件，可以封装一个自定义Hook，结合useNavigation和useNavigationState实现：

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

/**
 * 监听当前栈的Push/Pop事件
 * @param {Function} onPush - Push触发时的回调
 * @param {Function} onPop - Pop触发时的回调
 */
function useStackEvents(onPush, onPop) {
  const navigation = useNavigation();
  const initialRouteCount = useNavigationState(state => state.routes.length);

  useEffect(() => {
    let previousRouteCount = initialRouteCount;

    const unsubscribe = navigation.addListener('state', (event) => {
      const newRouteCount = event.data.state.routes.length;
      const currentRoute = event.data.state.routes[event.data.state.index];

      // 跳过模态框相关操作
      if (currentRoute?.presentation === 'modal') {
        previousRouteCount = newRouteCount;
        return;
      }

      // 判断操作类型
      if (newRouteCount > previousRouteCount) {
        onPush?.();
      } else if (newRouteCount < previousRouteCount) {
        onPop?.();
      }

      previousRouteCount = newRouteCount;
    });

    return unsubscribe;
  }, [navigation, onPush, onPop, initialRouteCount]);
}

// 在屏幕组件中使用示例
function DetailScreen() {
  useStackEvents(
    () => {
      // Push进入当前屏幕时执行动画
      console.log('Push进入Detail');
    },
    () => {
      // Pop离开当前屏幕时执行动画
      console.log('Pop离开Detail');
    }
  );

  return (
    {/* 屏幕内容 */}
  );
}

关键说明 #

• 标签切换时，触发的是Tabs Navigator的状态变化，不会影响单个Native Stack的路由数量，因此上述方法可自动排除标签切换事件
• 若模态框属于全局独立栈而非当前Native Stack，无需额外判断；若模态框是当前栈的一部分，可通过route.presentation === 'modal'过滤

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu