【发布时间】：2021-10-18 04:54:21
【问题描述】：
我有一个使用 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",
【问题讨论】：
-
试试
redux-logger看看为什么会改变状态。 -
好的，我激活了 redux devtools 记录器。启动应用程序后。 “INIT”动作之后将是“UNKNOWN”动作。然后当我拉开抽屉时，会触发“OPEN_DRAWER”动作，一旦我将手指离开屏幕，就会触发第二个“OPEN_DRAWER”动作，并且抽屉导航会再次自动关闭。两个“OPEN_DRAWER”动作都有以下内容
{ type: 'OPEN_DRAWER', target: 'drawer-_VK6JQ8VYxsWzyNVMIV3A' }。
标签： javascript react-native react-navigation-v5 react-navigation-drawer