React Native Expo应用Tab与Drawer导航同名警告及组件访问问题解决

1. 命名冲突：Drawer导航器中的屏幕名称（Home、Profile）与Tab导航器内部的屏幕名称完全重复，React Navigation会将其识别为嵌套的同名路由，从而抛出警告。
2. 导航逻辑错误：Drawer的两个选项都指向同一个TabsNavigator组件，且Tab导航器默认加载第一个屏幕（Home），导致点击Drawer中的Profile选项时，仍然显示Home页面，无法切换到Profile组件。

步骤1：修改Drawer屏幕名称，解决命名冲突 #

将Drawer中屏幕的name改为与Tab内部不重复的标识，同时通过options.drawerLabel保持用户看到的显示文字不变。

步骤2：让TabsNavigator支持接收初始路由参数 #

修改TabsNavigator，使其能够根据传入的参数设置默认加载的页面，实现点击Drawer选项直接切换到对应Tab页面。

步骤3：清理不必要的导入 #

移除未使用的createStackNavigator相关代码。

完整修正后的代码：

import React, { useState } from "react";
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import 'react-native-gesture-handler';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { NavigationContainer } from '@react-navigation/native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import AnimatedSplash from "react-native-animated-splash-screen";
import Home from './screens/Home';
import Profile from './screens/Profile';

const Tab = createMaterialBottomTabNavigator();
const Drawer = createDrawerNavigator();

// 修改TabsNavigator，支持接收初始路由参数
function TabsNavigator({ route }) {
  // 如果没有传参数，默认加载Home页面
  const initialRoute = route.params?.initialRoute || 'Home';
  return (
    <Tab.Navigator initialRouteName={initialRoute}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <FontAwesome5 name="user" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function App() {
  const [loading, setLoading] = useState(false);

  setTimeout(() => {
    setLoading(true);
  }, 3000);

  return (
    <AnimatedSplash
      translucent={true}
      isLoaded={loading}
      logoImage={require("./assets/splash.png")}
      backgroundColor={"#FFFFFF"}
      logoHeight={650}
      logoWidth={550}
    >
      <NavigationContainer>
        <Drawer.Navigator>
          {/* 修改Drawer屏幕名称，避免与Tab内部重名，同时设置显示标签 */}
          <Drawer.Screen
            name="HomeDrawer"
            component={TabsNavigator}
            options={{ drawerLabel: 'Home' }}
            // 传递初始路由参数，指定加载Home Tab
            initialParams={{ initialRoute: 'Home' }}
          />
          <Drawer.Screen
            name="ProfileDrawer"
            component={TabsNavigator}
            options={{ drawerLabel: 'Profile' }}
            // 传递初始路由参数，指定加载Profile Tab
            initialParams={{ initialRoute: 'Profile' }}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    </AnimatedSplash>
  );
}

export default App

额外优化建议 #

如果你的需求是让Drawer作为全局导航入口，同时Tab作为底部导航，更合理的结构是将TabsNavigator作为Drawer的一个主屏幕，然后在Drawer中添加其他独立的功能页面，避免重复加载TabsNavigator：

// 优化后的Drawer结构
<Drawer.Navigator>
  <Drawer.Screen
    name="MainTabs"
    component={TabsNavigator}
    options={{ drawerLabel: '主页' }}
  />
  <Drawer.Screen
    name="Settings"
    component={Settings}
    options={{ drawerLabel: '设置' }}
  />
</Drawer.Navigator>

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