嵌套栈导航器切换标签后，如何返回栈顶？

问题描述 #

Tab1为Home页面，Tab2是嵌套了Stack导航器的页面，该Stack初始页为index，包含跳转到epaper、watch等子页面的链接。从Home页面可直接跳转到Tab2的嵌套子页面，goBack返回功能正常。但从Tab2的嵌套子页面切换到Tab1后，再通过底部标签切回Tab2时，Stack并未回到初始的index页，而是停留在之前的嵌套子页面。

解决方案 #

方法1：监听标签页焦点，重置嵌套栈 #

在Tab2的Stack布局组件中，使用useFocusEffect监听页面焦点，当Tab2获得焦点时，将Stack重置到初始页面。这种方法不会卸载组件，能保留必要的状态，同时确保每次切回Tab2都回到初始页。

代码示例（React Navigation）：

import { useFocusEffect } from '@react-navigation/native';
import { CommonActions } from '@react-navigation/native';
import React from 'react';
import { Stack } from '@react-navigation/stack';

function ExploreStack() {
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      // 重置栈到index页面
      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: 'index' }],
        })
      );
    }, [navigation])
  );

  return (
    <Stack>
      <Stack.Screen name='index' />
      <Stack.Screen
        name='epaper'
        options={{ headerLeft: () => <Back /> }}
      />
      <Stack.Screen
        name='watch'
        options={{ headerLeft: () => <Back /> }}
      />
    </Stack>
  );
}

如果使用Expo Router，代码调整为：

import { useFocusEffect } from 'expo-router';
import { Stack } from 'expo-router';
import React from 'react';

export default function ExploreLayout() {
  const router = useRouter();

  useFocusEffect(
    React.useCallback(() => {
      // 跳转回Tab2的初始页
      router.replace('/explore');
    }, [router])
  );

  return (
    <Stack>
      <Stack.Screen name='index' />
      <Stack.Screen name='epaper' options={{ headerLeft: () => <Back /> }} />
      <Stack.Screen name='watch' options={{ headerLeft: () => <Back /> }} />
    </Stack>
  );
}

方法2：设置标签页卸载选项 #

如果不需要保留Tab2页面的任何状态，可以直接在Tabs的Screen配置中开启unmountOnBlur，这样切换到其他标签时，Tab2的整个Stack会被卸载，切回时重新加载初始页。

代码示例：

<Tabs>
  <Tabs.Screen name='home' />
  <Tabs.Screen
    name='explore'
    options={{ unmountOnBlur: true }}
  />
</Tabs>

这种方法实现简单，但会丢失Tab2页面的所有状态，适合无需保留状态的场景。

内容的提问来源于stack exchange，提问作者Zachary Proverbs-Harris