React Navigation嵌套栈跳转后如何恢复底部Tab默认页面

问题原因 #

BottomTabNavigator会自动保留每个Tab对应嵌套Stack的导航状态，当你从Tab1的Screen A跳转到Tab2的Screen C后，Tab2的Stack就停在了Screen C页面，后续点击底部Tab2按钮时，就会加载这个保留的状态，而非默认的Screen D。

解决方案 #

方案1：拦截Tab点击事件，重置导航栈 #

在创建BottomTabNavigator时，通过screenOptions里的tabBarOnPress拦截Tab2的点击操作，手动重置其对应的Stack到默认页面Screen D：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarOnPress: ({ navigation, defaultHandler }) => {
          if (route.name === 'Tab 2') {
            // 重置Tab2的导航栈到初始状态（Screen D）
            navigation.reset({
              index: 0,
              routes: [
                {
                  name: 'Tab 2',
                  state: { routes: [{ name: 'Screen D' }] }
                }
              ]
            });
          }
          // 执行默认的Tab切换逻辑
          defaultHandler();
        }
      })}
    >
      <Tab.Screen name="Tab 1" component={Tab1Stack} />
      <Tab.Screen name="Tab 2" component={Tab2Stack} />
      <Tab.Screen name="Tab 3" component={Tab3Stack} />
    </Tab.Navigator>
  );
}

方案2：自定义Tab按钮，手动控制导航 #

如果需要更灵活的控制，可以给Tab2自定义底部按钮，在点击时直接重置导航栈：

import { TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab 1" component={Tab1Stack} />
      <Tab.Screen
        name="Tab 2"
        component={Tab2Stack}
        options={({ navigation }) => ({
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                // 重置Tab2的导航栈到Screen D
                navigation.reset({
                  index: 0,
                  routes: [
                    {
                      name: 'Tab 2',
                      state: { routes: [{ name: 'Screen D' }] }
                    }
                  ]
                });
                // 触发默认的Tab点击行为
                props.onPress();
              }}
            />
          )
        })}
      />
      <Tab.Screen name="Tab 3" component={Tab3Stack} />
    </Tab.Navigator>
  );
}

补充说明 #

如果只是希望从Screen A跳转到Screen C后，用户在Tab2内部返回时能回到Screen D，而不是点击Tab按钮时强制回到默认，那可以保持原来的跳转逻辑不变。但如果要求每次点击Tab2都必须回到默认页面，上面的两种方案都可以实现需求。

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