javascript - React Native Drawer Navigation 总是自动关闭

Question

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

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

为此，我在顶层添加了 Drawer Navigator，嵌套了现有的 Tab 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",

Answer 1

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

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