如何在堆栈中添加屏幕并仅导航到添加的最后一个屏幕，这样当我返回时，我会到达倒数第二个屏幕，依此类推

Question

我根据用户是否经过身份验证有条件地渲染两个单独的堆栈。

 <NavigationContainer ref={navigationRef}>
      <Stack.Navigator>
        {isAuthenticated ? (
            <Stack.Screen name={stacks.appStack} component={AppStack} />
        ) : (
          <Stack.Screen name={stacks.authStack} component={AuthStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>

我的 AuthStack 有两个登录屏幕 Login1 和 Login2。当用户打开应用程序时，他首先看到 Login1 屏幕，在其中输入用户名密码等详细信息，然后在 Login2 屏幕上，要求用户输入更多详细信息。一旦用户通过身份验证，AppStack 就会被加载。这按预期工作。

现在，当用户退出应用程序时，它会根据需要有条件地加载 authStack。但我希望 Login1 和 Login2 屏幕都应该添加到该 authStack 中，但用户首先直接登陆 Login2 屏幕。一旦用户向右滑动，他/她就可以从那里进入登录 1 屏幕。

我们到底如何使用反应导航来做到这一点，即将 Login1 屏幕放入堆栈中但尚未导航到它，先放入 Login2 屏幕并导航到该屏幕？

Answer 1

我解决这个问题的方法是添加另一个名为 AuthenticationRouter 的组件，该组件位于 AuthStack 的顶部。该组件将创建一个路由数组，其中 Login1 和 Login2 的路由按照我想要的顺序推送，然后该数组作为路由传递到 AuthenticationRouter 的 useEffect 中 React Navigation 提供的

CommonActions.reset()

方法中。

例如，我们只需在 AuthenticationRouter 的 useEffect 中创建并调用以下函数。

const determineLoginDisplay = () => {
    const routesBasedOnFlags = getRoutesBasedOnFlags();
    const resetStack = CommonActions.reset({
      index: routesBasedOnFlags.length - 1,
      routes: routesBasedOnFlags,
    });
    navigation.dispatch(resetStack);
  };