Drawer Navigation功能异常求助：依赖已装但抽屉导航无法工作

已安装所有依赖包，无任何报错信息，但Drawer Navigation功能异常，无法正常工作，需要有效的排查提示。以下是Navigation.js和App.js的代码：

Navigation.js代码 #

import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { View, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator } from '@react-navigation/stack';
import { RootSiblingParent } from 'react-native-root-siblings';
import SignIn from '../Screens/SignIn';
import Home from '../Screens/Home';
import ForgotPassword from '../Screens/ForgotPassword';
import ChangePassword from '../Screens/ChangePassword';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const CustomDrawer = (props) => {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View
          style={{
            alignSelf: 'center',
            padding: 20,
          }}>
          <View>
            <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
              BusGo Captain App
            </Text>
          </View>
        </View>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <TouchableOpacity
        style={{
          position: 'absolute',
          right: 0,
          left: 0,
          bottom: 50,
          backgroundColor: '#f6f6f6',
          padding: 20,
        }}></TouchableOpacity>
    </View>
  );
};

function DrawerRoutes() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawer {...props} />}>
      <Drawer.Screen
        name="Home"
        component={Home}
        options={{
          headerShown: false,
          title: 'Home',
          drawerIcon: ({ focused, size }) => (
            <Icon name="home" size={size} color="black" />
          ),
        }}
      />
    </Drawer.Navigator>
  );
}

function Navigation() {
  return (
    <RootSiblingParent>
      <Stack.Navigator>
        <Stack.Screen name="SignIn" component={SignIn} />

        <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
        <Stack.Screen name="ChangePassword" component={ChangePassword} />
        <Stack.Screen name="DrawerRoutes" component={DrawerRoutes} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </RootSiblingParent>
  );
}

export default Navigation;

App.js代码 #

import { NavigationContainer } from '@react-navigation/native';
import Navigation from './Src/Navigation/Navigation'

export default function App() {
  return (
    <NavigationContainer>
      <Navigation />
    </NavigationContainer>
  );
}

排查及修复要点 #

• 调整导航嵌套逻辑：当前Stack导航中同时存在DrawerRoutes和Home路由，如果直接跳转到Home，会绕过抽屉导航。需移除Stack中的Home路由，所有进入Home页面的操作都通过DrawerRoutes，确保抽屉导航的上下文生效。
• 修正Gesture Handler导入位置：import 'react-native-gesture-handler';必须放在App.js的最顶部，否则抽屉的侧滑手势可能无法触发。
• 添加抽屉触发入口：DrawerRoutes中的Home页面设置了headerShown: false，没有默认的抽屉触发按钮。需在Home组件中添加触发按钮，示例代码：

  import { useNavigation } from '@react-navigation/native';
  import { TouchableOpacity, Icon } from 'react-native';
  
  // 在Home组件内部
  const navigation = useNavigation();
  // 渲染触发按钮
  <TouchableOpacity onPress={() => navigation.openDrawer()}>
    <Icon name="bars" size={24} color="black" />
  </TouchableOpacity>
  

• 移除冗余的NavigationContainer导入：Navigation.js中导入的NavigationContainer是冗余的，因为App.js已经用它包裹了整个导航结构，可删除该导入语句。
• 检查依赖配置：确保react-native-reanimated已正确配置（在babel.config.js中添加plugins: ['react-native-reanimated/plugin']），且所有导航相关依赖版本兼容。

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