Expo Navigation Drawer点击图标无法打开且无报错，如何解决？

问题现象 #

点击导航栏头部的汉堡图标时，侧边抽屉（Drawer）无法弹出，控制台无任何错误信息，预期点击后左侧能正常滑出Drawer组件。

复现代码 #

import * as React from "react";
import { Button, View } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        onPress={() => navigation.navigate("Notifications")}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

解决方案 #

1. 检查并完善依赖配置 #

@react-navigation/drawer 依赖 react-native-gesture-handler 和 react-native-reanimated，这两个库未正确安装或配置是抽屉无响应的常见原因：

• 安装依赖：

# npm
npm install react-native-gesture-handler react-native-reanimated

# yarn
yarn add react-native-gesture-handler react-native-reanimated

• 配置Reanimated插件：
  在项目根目录的 babel.config.js 中添加Reanimated插件：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

• 重启Metro服务并清理缓存：

npx react-native start --reset-cache

2. 手动绑定汉堡图标点击事件 #

如果依赖配置后仍无效果，可以手动为头部汉堡图标添加点击事件，强制触发抽屉弹出：

修改HomeScreen组件：

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <Button
          onPress={() => navigation.openDrawer()}
          title="☰"
          color="#000"
        />
      ),
    });
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        onPress={() => navigation.navigate("Notifications")}
        title="Go to notifications"
      />
    </View>
  );
}

3. 排查Drawer导航器配置 #

检查Drawer.Navigator是否设置了禁用抽屉的属性，比如swipeEnabled={false}、drawerType="hidden"等，确保这些属性未被错误配置。

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