如何在用户身份验证更改时重置导航多个导航堆栈？答案

【问题标题】：How to reset a navigation multiple navigation stacks on user auth change?如何在用户身份验证更改时重置导航多个导航堆栈？
【发布时间】：2019-07-18 17:41:51
【问题描述】：

我已经为我的 react native/Expo 应用程序使用 react-navigation 几个月了，它非常有帮助。但是，我无法理解重置机制，如果有人能向我解释一下，我将非常感激，因为文档几乎没有提供有关它的详细信息。

我有嵌套的堆栈导航器、底部标签栏导航器和一个抽屉，其中我有一个可以从应用程序的任何屏幕调用的注销按钮。假设这是我的导航

HOME
DASHBOARD
POST
  PostList (initial route of the stack)
  PostCreate
  PostEdit
PAYMENT

当我转到发布列表时，然后发布创建，然后是仪表板。注销后我被重定向到 HOME，我使用另一个帐户登录，如果我尝试转到最初的发布路线，我将被重定向到 PostCreate 而不是 PostList。

我尝试在按下注销按钮时发送重置操作，但这似乎不是一个可靠的解决方案，因为由于某种原因，当仪表板屏幕处于活动状态时，我无法从抽屉重定向到主页。

const goToHomeAction = StackActions.reset({
            index: 1,
            actions: [NavigationActions.navigate({ routeName: HOME_ROUTE })],
        });
        this.props.navigation.dispatch(goToHomeAction);

它会抛出错误“没有为关键 HomeRoute 定义路由，必须是 'Dashboard' 之一”。

有没有办法简单地清除所有导航状态，只需返回应用程序的初始屏幕并清除所有堆栈导航器，以便用户转到各自的初始屏幕？

【问题讨论】：

标签： react-navigation

【解决方案1】：

你可以试试popToTop。 popToTop 操作将您带回堆栈中的第一个屏幕，关闭所有其他屏幕。所以这会带你到 HOME_ROUTE

this.props.navigation.dispatch(StackActions.popToTop());

希望这会有所帮助！

【讨论】：

【解决方案2】：

我尝试了许多不同的方法，包括部分解决了我的问题的 popToTop。但我意识到我的项目导航结构非常混乱，所以我最终完全重组了它。

https://www.reactnativeschool.com/complex-navigation-example-with-react-navigation

本教程帮助很大，我强烈推荐给任何理解反应导航有困难的人。

我将整个应用程序分为两个堆栈导航器，AuthStack（我放置所有身份验证逻辑）和 AppStack（其中包含需要用户登录的所有屏幕），其中 Dashboard 作为初始路径。

这是我在用户登录时用来清除导航的方法：

 public goToDashboardAndClearNavigation = () => {
   const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: DASHBOARD })],
      key: DASHBOARD
    })
    this.props.navigation.dispatch(resetAction)
  }

并且我添加了这个生命周期方法，以便在用户退出仪表板屏幕组件后将用户重定向到登录屏幕：

  public componentDidUpdate = (prevProps: any) => {
    if (prevProps.user !== null && this.props.user === null) {
      this.props.navigation.navigate(LOGIN)
    }
  }

【讨论】：