如何在Tab视图中打开抽屉导航器，该视图嵌套在Switch Nav中？

Question

我发现在嵌套导航器方面，createDrawerNavigator上的文档很难理解。

我有2个导航器和抽屉导航器，我不知道放在哪里

A =父SwitchNavigator

const MainNavigator = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  Auth: AuthStack,
  App: AppStack,
}

B = AppStack TabNavigator

在TabNavigator中的一个标签上，我想打开一个抽屉导航器。

我该怎么做？我应该创建一个单独的抽屉导航器并将其放在Switch内，还是应该将它嵌套在TabNavigator中？我尝试了两种方法，我可以在抽屉里加载View，但不能在抽屉本身加载。

Answer 1

您需要创建一个新的抽屉导航器组件，然后将其用作屏幕

像这样

const MainNavigator = createBottomTabNavigator({
  YourScreenName: YourDrawerNavigatorComponent,
}

这篇文章详述了一切 https://medium.com/async-la/react-navigation-stacks-tabs-and-drawers-oh-my-92edd606e4db

Answer 2

好的，这是在浪费时间，但是我终于解决了这个问题，现在可以使用标题为this.props.navigation.openDrawer();的标题按钮打开抽屉，将抽屉放在标签导航器中，如下所示：

const MainNavigator = createBottomTabNavigator({
  YourScreenName: YourDrawerNavigatorComponent,
}

只需更新到最新的react-navigation版本3.0.0，在项目的根文件夹中运行以下命令：npm i react-navigation@^3.0.0或yarn add react-navigation@^3.0.0，它实际上是昨天发布的。

如果在未指定版本的情况下安装react-navigation，它将安装有此问题的2.18.2版本！

安装后请务必遵循本指南（非常重要！）：https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0

您需要按照指南更改代码中的一些内容。

故障排除 ：请确保清除缓存并退出并重新打开所有终端，是的。