React Native Drawer Navigation 总是自动关闭

Question

我有一个使用 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",

Answer 1

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

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

React Native Drawer Navigation 总是自动关闭

React Native Drawer Navigation always closing automatically

javascript

react-native

react-navigation-v5

react-navigation-drawer