Question

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

我在SwitchNavigator内的DrawerNavigator中嵌套了多个StackNavigator。是的，很烂。

假设我有一个带有3个堆栈的DrawerNavigator：HomeStack（本地路由，个人资料路由，历史记录路由），SearchStack（列表路由，详细信息路由）和CartStack（查看路由，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 },
  }
)

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

Answer 1

我不得不用onpress => navigation（'parent stack'）用自定义按钮替换抽屉内容/项目。

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

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

1 个答案: