React Native Drawer Navigation 总是自动关闭

React Native Drawer Navigation always closing automatically

我有一个使用 React Navigation 的 React Native 应用程序。该应用程序已经包含一个 Tab Navigator 嵌套 Stack Navigators。现在我还想在最顶层添加一个抽屉导航,显示自定义抽屉内容。

所以我的层次结构是 DrawerNavigator(嵌套 1 个 TabNavigator)> TabNavigator(嵌套 5 个 StackNavigator)> Stack Navigator(嵌套实际内容屏幕的单个数量)。

为此,我在顶层添加了抽屉导航器,嵌套了现有的选项卡导航器:

<Drawer.Navigator
    initialRouteName="MainTabNav"
    drawerContent={props => <DrawerMenu {...props} />}
    screenOptions={{
        headerShown: false,
    }}>
    <Drawer.Screen name="MainTabNav" component={MainTabNavigator} />
</Drawer.Navigator>

我现在的问题是:当我从左向右滑动时,抽屉出现了,只要我把手指放在屏幕上,我就可以看到我的自定义抽屉导航组件。每当我从屏幕上移开手指时,抽屉导航会再次自动关闭。

此外,从 Stack Navigator 中的 Pressable 调用 navigation.dispatch(DrawerActions.openDrawer()) 不会执行任何操作 - 抽屉根本不会打开。

...
import {useNavigation} from '@react-navigation/native';
import {DrawerActions} from '@react-navigation/native';

const DrawerMenuButton = props => {
  const navigation = useNavigation();

  return (
    <Pressable
      onPress={() => {
        navigation.dispatch(DrawerActions.toggleDrawer());
      }}>
...

有人知道解决这个问题的方法吗?

非常感谢和最诚挚的问候 智能家居制造商

P.S.:我的配置如下

"react": "17.0.2",
"react-native": "0.64.2",
"@react-navigation/drawer": "^6.1.3",
"@react-navigation/native": "^5.1.7",
"@react-navigation/stack": "^5.2.14",
"@react-navigation/bottom-tabs": "^5.5.2",

我看到@react-navigation/native 的版本是 v5。但是抽屉是v6。所以请将其降级到 v5。它会起作用。

npm install @react-navigation/drawer@^5.x