React Native中Drawer导航失效，Stack与Tab导航正常求排查

核心问题 #

你的代码中虽然定义了MyDrawer抽屉导航组件，但从未在App的导航结构中引入它——当前App的根导航是底部Tab导航，抽屉导航完全没有被挂载到应用中，所以无法触发显示。

解决方案 #

要让Drawer导航正常工作，需要将它与Tab导航整合到同一个导航层级中，常见的两种整合方式如下：

方式一：将Tab导航嵌套为Drawer的一个屏幕（推荐）

这种方式下，Drawer是App的根导航，Tab导航作为Drawer的其中一个选项，同时你可以在Drawer中添加其他独立屏幕。

修改后的完整代码：

import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView,DrawerItemList,DrawerItem, } from '@react-navigation/drawer';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Cards"
        onPress={() => navigation.navigate('Cards')}
      />
    </View>
  );
}

const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator initialRouteName="Home">
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="FeedScreen" component={FeedScreen} />
      <HomeStack.Screen name="Message" component={Message} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Cards" component={Cards} />
    </SettingsStack.Navigator>
  );
}

const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen(){
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen}/>
    </ProfileStack.Navigator>
  )
}

const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeStackScreen} />
      <Tab.Screen name="Settings" component={SettingsStackScreen} />
      <Tab.Screen name="Profile" component={ProfileStackScreen} />        
    </Tab.Navigator>
  );
}

const Drawer = createDrawerNavigator();
function MyDrawer() {
  return (
    <Drawer.Navigator screenOptions={{ drawerPosition: 'left' }}>
      {/* 将Tab导航作为Drawer的一个主屏幕 */}
      <Drawer.Screen name="MainTabs" component={MyTabs} options={{ title: '首页' }} />
      {/* 可以添加其他独立的Drawer屏幕 */}
      <Drawer.Screen name="Message" component={Message} />
    </Drawer.Navigator>   
  );
}

export default function App() {
  return (
    <NavigationContainer>
      {/* 现在App的根导航是Drawer */}
      <MyDrawer />
    </NavigationContainer>
  );
}

关键改动：

1. 将原来的Tab导航封装为MyTabs组件
2. 在MyDrawer中添加MainTabs屏幕，对应MyTabs组件
3. App的根导航替换为MyDrawer，而非原来的Tab导航
4. 可以在HomeScreen中添加打开抽屉的按钮：

// HomeScreen.js示例
import { Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    // ...原有内容
    <Button title="打开抽屉" onPress={() => navigation.openDrawer()} />
  );
}

方式二：在Tab的某个屏幕中嵌套Drawer

如果只需要在特定Tab页面中使用Drawer，可以将Drawer嵌套进对应的Stack导航中，比如HomeStack：

修改HomeStackScreen：

const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator initialRouteName="Home">
      <HomeStack.Screen 
        name="Home" 
        component={MyDrawer} 
        options={({ navigation }) => ({
          headerLeft: () => (
            <Button title="菜单" onPress={() => navigation.openDrawer()} />
          )
        })}
      />
      <HomeStack.Screen name="FeedScreen" component={FeedScreen} />
      <HomeStack.Screen name="Message" component={Message} />
    </HomeStack.Navigator>
  );
}

这种方式下，只有进入Home页面时才会加载Drawer，其他Tab页面不受影响。

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