Question

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

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

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

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

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

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

它引发错误“没有为键HomeRoute定义的路由，必须是'Dashboard'之一。”

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

Answer 1

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

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

希望这会有所帮助！

Answer 2

我尝试了许多不同的方法，包括popToTop，它部分解决了我的问题。但是我意识到项目导航的结构确实很混乱，因此我最终对其进行了完全重组。

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

本教程对您有很大帮助，我强烈建议对理解反应导航有困难的任何人。

我将整个应用程序划分为两个堆栈导航器，即AuthStack（放置所有Authentification逻辑）和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)
    }
  }

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

2 个答案: