React Navigation 4：重置嵌套在 DrawerNavigator 中的 StackNavigator答案

【问题标题】：React Navigation 4: reset StackNavigator nested inside DrawerNavigatorReact Navigation 4：重置嵌套在 DrawerNavigator 中的 StackNavigator
【发布时间】：2020-07-27 16:56:01
【问题描述】：

我的 React Navigation 设置有一个常见问题。

我有多个 StackNavigator 嵌套在 SwitchNavigator 内的 DrawerNavigator 中。是的，一团糟。

假设我有一个带有 3 个堆栈的 DrawerNavigator：HomeStack（Home 路由、Profile 路由、History 路由）、SearchStack（List 路由、Detail 路由）和 CartStack（Review 路由、PaymentMethod 路由、Confirmation 路由）。

如果用户浏览主页堆栈（主页 -> 个人资料 -> 历史），然后转到 SearchStack，这自然会导致 CartStack，如果我尝试将用户带到 HomeStack，导航器会将他带到顶部屏幕堆栈（在本例中为历史记录）。

当用户尝试使用抽屉导航时，这是一个问题，因为导航器总是将用户带到堆栈的顶部屏幕。这可能是一种自然行为，但有没有办法在用户每次按下抽屉项目时覆盖它或重置堆栈？哪种方法最好？

我尝试使用 StackActions 将用户从 Confirmation 路由带到 Home，但出现错误（“没有为...定义路由”）。

主导航是这样的（这里切换屏幕没问题）：

const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: LoadingScreen,
      AuthStack: AuthNavigation,
      CoachApp: CoachNavigation,
      StudentApp: StudentNavigation
    },
    {
      initialRouteName: 'AuthLoading'
    }
  )
);

CoachNavigation 看起来像这样：

export default CoachNavigation = createDrawerNavigator(
  {
    DrawerHome: { screen: HomeStack }, 
    DrawerSearch: { screen: SearchStack }, 
    DrawerCart: { screen: CartStack },
  }
)

任何建议都会有所帮助。在此先感谢，如果我的解释不好，请见谅。

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

我不得不用 onpress => navigate('parent stack') 的自定义按钮替换抽屉内容/项目。

https://reactnavigation.org/docs/drawer-navigator/#drawercontent

【讨论】：