时间戳

首页 > 解决方案 > React Navigation 4：重置嵌套在 DrawerNavigator 中的 StackNavigator

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

问题描述

我的 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-nativereact-navigationreact-navigation-stackreact-navigation-drawer

解决方案

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

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

推荐阅读