React Native调用navigation.openDrawer()无法打开抽屉导航求助

问题 #

调用navigation.openDrawer()无法打开抽屉导航，打印navigation对象能看到该方法存在。设置defaultStatus="open"时，应用启动抽屉正常打开，滑动手势、内部页面导航都没问题，但一旦触发调用openDrawer()的按钮，抽屉就会卡住，连滑动手势都失效。

已确认react-native-gesture-handler已在根组件index.js最顶部导入，滑动动画、内部导航正常，排除手势库和导航库基础功能问题。试过官方文档、GitHub和StackOverflow上的多种方案，均无效。

环境依赖版本 #

"@react-navigation/drawer": "^6.6.2",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/native": "^6.1.6",
"react-native-gesture-handler": "^2.10.1",
"react-native-reanimated": "^3.2.0",
"react-native-screens": "^3.20.0",

最小复现代码 #

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"
      />
      {/* 补充测试openDrawer的按钮 */}
      <Button
        onPress={() => {
          console.log(navigation);
          navigation.openDrawer();
        }}
        title="Open Drawer"
        style={{ marginTop: 20 }}
      />
    </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. 检查Reanimated Babel配置 #

Reanimated 3.x需要额外配置babel插件，确保babel.config.js中已添加：

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

添加后清除缓存并重启Metro：

npx react-native start --reset-cache

2. 确认navigation对象来源 #

如果页面嵌套在NativeStack中，需通过getParent()获取抽屉导航的实例：

// 替换原调用方式
navigation.getParent()?.openDrawer();

3. 降级Reanimated版本 #

Reanimated 3.x可能与当前导航版本存在兼容性问题，尝试降级到2.x稳定版：

npm install react-native-reanimated@2.14.4

安装完成后清除缓存重启Metro。

4. 修改抽屉导航类型 #

显式设置drawerType为front，避免默认slide类型的潜在冲突：

<Drawer.Navigator 
  initialRouteName="Home"
  drawerType="front"
>
  {/* ... 页面配置 */}
</Drawer.Navigator>

5. 移除冲突手势组件 #

检查页面中是否有自定义的GestureHandler组件，暂时移除后测试是否恢复正常。

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