React Native中如何在Tab Navigator内嵌套使用Stack Navigator

错误原因 #

你触发报错的核心问题是NavigationContainer作为导航根容器，只能挂载唯一的根导航组件，你当前代码里把Stack.Navigator和Tab.Navigator作为同级组件放在NavigationContainer下，结构完全不符合React Navigation的规范，才会抛出route.key相关的类型错误。

正确实现逻辑 #

你的需求是将Add Budget页面归属于Budget模块、不显示在底部Tab栏，只允许从Budget页点击FAB跳转，正确的嵌套逻辑是：将Tab导航作为根导航，给Budget模块单独嵌套一层Stack导航，把Budget主页面和Add Budget页面都放在这个子Stack里。

完整实现代码 #

1. 封装Budget模块的子Stack导航 #

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

const BudgetStack = createStackNavigator();

function BudgetStackScreen() {
  return (
    <BudgetStack.Navigator>
      {/* Budget主页面，会显示在底部Tab栏 */}
      <BudgetStack.Screen 
        name="BudgetMain" 
        component={budget} 
        options={{ headerShown: false }} 
      />
      {/* Add Budget页面，仅能从Budget主页面跳转，不会出现在Tab栏 */}
      <BudgetStack.Screen 
        name="Add Budget" 
        component={addBudget} 
      />
    </BudgetStack.Navigator>
  );
}

2. 修改根Tab导航配置 #

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 可选导入：如果需要跳转Add Budget时隐藏底部Tab栏需要用到
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default function RootNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        // 可选配置：跳转Add Budget时隐藏底部Tab栏
        screenOptions={({ route }) => {
          const focusedRoute = getFocusedRouteNameFromRoute(route);
          return {
            tabBarStyle: {
              display: focusedRoute === 'Add Budget' ? 'none' : 'flex'
            }
          }
        }}
      >
        <Tab.Screen name="Home" component={getTransaction} />
        {/* 替换原来的budget组件为封装好的BudgetStackScreen */}
        <Tab.Screen name="Budget" component={BudgetStackScreen} />
        <Tab.Screen name="Register" component={register} />
        <Tab.Screen name="Login" component={login} />
        <Tab.Screen name="TransactionDetails" component={transactionDetails} />
        <Tab.Screen name="Profile" component={profile} />
        <Tab.Screen name="CSV" component={exportToCSV} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

3. FAB跳转代码无需修改 #

你原有Budget页面的FAB跳转逻辑可以直接正常运行，不需要调整：

<FAB
   style={styles.fab}
   icon="plus"
   color="#5FC5FF"
   onPress={() => this.props.navigation.navigate("Add Budget")}
/>

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