如何从父TabNavigator重置子StackNavigator至初始页面？

Hey! 我之前刚好碰到过一模一样的需求，折腾了一会儿终于搞定了，给你分享两个实用的方案：

这个方法最简单直接，不需要自定义TabBar，只需要给每个Tab.Screen配置onPress回调，判断当前Tab是否已经被选中，如果是就重置对应的栈到初始页面。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 示例栈组件：Tab1的页面栈
function Tab1Stack() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName="Tab1Home">
      <Stack.Screen name="Tab1Home" component={Tab1Home} />
      <Stack.Screen name="Tab1Detail" component={Tab1Detail} />
    </Stack.Navigator>
  );
}

// 示例栈组件：Tab2的页面栈
function Tab2Stack() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName="Tab2Home">
      <Stack.Screen name="Tab2Home" component={Tab2Home} />
      <Stack.Screen name="Tab2Detail" component={Tab2Detail} />
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Tab1"
          component={Tab1Stack}
          onPress={({ navigation, route }) => {
            // 如果当前已经在这个Tab页面，就重置栈到初始页
            if (navigation.isFocused()) {
              navigation.reset({
                index: 0,
                routes: [{ name: 'Tab1Home' }], // 这里要和Tab1Stack的initialRouteName一致
              });
            } else {
              // 否则正常切换到该Tab
              navigation.navigate(route.name);
            }
          }}
        />
        <Tab.Screen
          name="Tab2"
          component={Tab2Stack}
          onPress={({ navigation, route }) => {
            if (navigation.isFocused()) {
              navigation.reset({
                index: 0,
                routes: [{ name: 'Tab2Home' }], // 对应Tab2Stack的初始页
              });
            } else {
              navigation.navigate(route.name);
            }
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

逻辑说明 #

• 通过navigation.isFocused()判断当前Tab是否处于激活状态
• 如果已经激活，调用navigation.reset()将栈重置到初始页面（index:0表示栈只有一个页面，就是你指定的初始页）
• 如果未激活，就正常跳转到该Tab，保留默认的切换动画和行为

如果你的TabBar需要自定义样式（比如特殊图标、布局），或者有更复杂的点击逻辑，可以自己实现TabBar组件，在点击事件里处理栈重置。

import { View, TouchableOpacity, Text } from 'react-native';
import { StackActions } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 自定义TabBar组件
function CustomTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row', backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        // 获取Tab的显示标签
        const label = options.tabBarLabel || options.title || route.name;
        // 判断当前Tab是否被选中
        const isFocused = state.index === index;

        const onPress = () => {
          // 触发TabPress事件，兼容默认行为
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            // 未选中时，正常切换到该Tab
            navigation.navigate(route.name);
          } else if (isFocused) {
            // 已选中时，重置对应栈到初始页
            const resetAction = StackActions.reset({
              index: 0,
              routes: [{ name: `${route.name}Home` }], // 对应栈的初始页名称
            });
            navigation.dispatch(resetAction);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, paddingVertical: 16, alignItems: 'center' }}
          >
            <Text style={{ color: isFocused ? '#2196F3' : '#666', fontSize: 14 }}>
              {label}
            </Text>
            {/* 这里可以添加自定义图标 */}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// 示例栈组件（和方案1一致）
function Tab1Stack() { /* ... */ }
function Tab2Stack() { /* ... */ }

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
        <Tab.Screen name="Tab1" component={Tab1Stack} />
        <Tab.Screen name="Tab2" component={Tab2Stack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

逻辑说明 #

• 自定义TabBar完全接管了Tab的点击事件，所以需要手动触发tabPress和tabLongPress事件来兼容React Navigation的默认行为
• 点击已选中的Tab时，通过StackActions.reset()分发重置栈的动作，实现回到初始页的效果

注意事项 #

• 确保重置的页面名称和对应StackNavigator的initialRouteName完全一致，否则会出现页面找不到的错误
• 如果你的StackNavigator有多层嵌套，需要调整reset的路由结构，比如嵌套栈的话要指定完整的路由路径
• 两个方案都适用于React Navigation 5.x和6.x，API基本没有差异

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