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

问题描述 投票:0回答:1

我的React导航设置有一个常见的问题,我有多个StackNavigator嵌套在DrawerNavigator中,而DrawerNavigator又在SwitchNavigator中。

我有多个StackNavigator嵌套在DrawerNavigator中,DrawerNavigator在SwitchNavigator中。是的,这真是一团糟。

比方说,我的DrawerNavigator有3个堆栈。HomeStack (Home route, Profile route, History route), SearchStack (List route, Detail route) 和CartStack (Review route, PaymentMethod route, Confirmation route).

如果用户导航到主页堆栈(Home -> profile -> history),然后进入SearchStack,这自然而然地就到了CartStack,如果我试图把用户带到主页堆栈,导航器就会把他带到堆栈的最上面的屏幕(在这个例子中,是历史)。

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

我试着用StackActions把用户从Confirmation路径带到Home,但我得到一个错误("There is no route defined for...")。

--

主导航是这样的(这里在屏幕之间切换没有问题)。

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个回答
0
投票

我不得不用自定义按钮替换抽屉内容项,并使用onpress => navigate('父堆栈')。

https:/reactnavigation.orgdocsdrawer-navigator#drawercontent。

© www.soinside.com 2019 - 2024. All rights reserved.