如何切换反应导航抽屉答案

【问题标题】：how to toggle react-navigation drawer如何切换反应导航抽屉
【发布时间】：2017-03-06 15:58:30
【问题描述】：

我将 react-navigation https://reactnavigation.org/ 用于我的第一个 react-native 项目。我想切换我的抽屉（打开和关闭），但我不知道如何实现这一点。我一直在查看 reactnavigation.org 的文档，但找不到任何提示。

【问题讨论】：

你这样做了吗？

标签： react-native react-navigation

【解决方案1】：

通过 React Navigation(v2)

要打开和关闭抽屉，请使用以下助手打开和关闭抽屉：

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

如果您想切换抽屉，请调用以下命令：

this.props.navigation.toggleDrawer();

这些函数中的每一个都在幕后简单地调度操作：

this.props.navigation.dispatch(DrawerActions.openDrawer());
this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.toggleDrawer());

【讨论】：

【解决方案2】：

如果您想切换抽屉，您可以导航到“DrawerToggle”，这将根据抽屉当前状态选择适合您的导航。

相应地触发“DrawerOpen&DrawerClose”

this.props.navigation.navigate('DrawerToggle');

【讨论】：

【解决方案3】：

根据the docs：

要打开和关闭抽屉，请分别导航到“DrawerOpen”和“DrawerClose”。
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

【讨论】：

是的，看到了，但是如何检查抽屉是否处于打开/关闭状态？
知道这已经很晚了，不确定您是否能够找到答案，但这是 React Navigation 建议您查找抽屉状态的方式。 const parent = this.props.navigation.dangerouslyGetParent(); const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen;

【解决方案4】：

查看 this.props.navigation.state。您应该能够在 example 中的 routeName 中找到“DrawerOpen”或“DrawerClose”。

【讨论】：

【解决方案5】：

对于版本 5.x：

导入 DrawerActions：

import { DrawerActions } from "@react-navigation/native";

你可以使用navigation.dispatch(DrawerActions.toggleDrawer())

【讨论】：