如何在Expo Router切换标签页时将栈重置至顶部？

针对你遇到的Tab嵌套Stack导航，切回Tab3时需要回到栈顶部的需求，可以用以下两种方法实现：

方法一：利用焦点监听自动重置栈 #

在Tab3的栈根页面（即栈的初始屏幕）中，使用useFocusEffect钩子监听页面焦点，当Tab3重新获得焦点时，调用栈的popToTop方法回到栈顶部：

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

export default function Tab3RootScreen() {
  const navigation = useNavigation();

  useFocusEffect(
    useCallback(() => {
      // 当Tab3获得焦点时，将栈弹出到最顶部
      navigation.popToTop();
    }, [navigation])
  );

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

这个方法无需修改TabBar，仅在栈的根页面添加监听即可，适配大多数场景。

方法二：自定义TabBar按钮，点击时重置栈 #

如果需要在点击Tab3按钮时直接触发重置，可以在Tab导航的布局文件（通常是app/(tabs)/_layout.tsx）中自定义TabBar按钮，在点击Tab3时先重置栈再切换：

import { Tabs } from 'expo-router';
import { useNavigation } from 'expo-router';
import { CommonActions } from '@react-navigation/native';
import { Pressable } from 'react-native';

export default function TabLayout() {
  const navigation = useNavigation();

  return (
    <Tabs>
      <Tabs.Screen 
        name="tab1" 
        options={{ title: 'Tab 1' }} 
      />
      <Tabs.Screen 
        name="tab2" 
        options={{ title: 'Tab 2' }} 
      />
      <Tabs.Screen 
        name="tab3" 
        options={{ 
          title: 'Tab 3',
          tabBarButton: ({ children, onPress }) => {
            const handleTabPress = () => {
              // 重置Tab3的栈到初始页面
              navigation.dispatch(
                CommonActions.reset({
                  index: 0,
                  routes: [{ name: '(tabs)/tab3' }],
                })
              );
              onPress();
            };
            return <Pressable onPress={handleTabPress}>{children}</Pressable>;
          }
        }} 
      />
    </Tabs>
  );
}

注意：代码中的路由名称'(tabs)/tab3'需要和你实际的路由结构匹配，你可以通过navigation.getState()查看当前路由的名称，确保填写正确。

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