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

Question

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

我有多个 StackNavigator 嵌套在 DrawerNavigator 中，而 DrawerNavigator 位于 SwitchNavigator 内。是啊，一团糟

假设我有一个包含 3 个堆栈的 DrawerNavigator：HomeStack（主页路线、配置文件路线、历史路线）、SearchStack（列表路线、详细路线）和 CartStack（审查路线、PaymentMethod 路线、确认路线）。

如果用户导航主页堆栈（主页 -> 配置文件 -> 历史记录）然后转到 SearchStack，这自然会导致 CartStack，如果我尝试将用户带到 HomeStack，导航器会将他带到顶部堆栈的屏幕（在本例中是历史记录）。

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

我尝试使用 StackActions 将用户从 Confirmation 路由带到 Home，但出现错误 ("There is no route defined for...")。

--

Main Navigation是这样的（这里切换界面没问题）：

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 },
  }
)

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

Answer 1

我不得不使用 onpress => navigate('parent stack').

用自定义按钮替换抽屉内容/项目

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