身份验证后 React Native 中的动态导航

Question

我的应用程序有一个动态身份验证流程，用户在经过身份验证后会被定向到不同的屏幕。问题是用户可以在注册后或登录后进行身份验证。 我正在努力根据是登录身份验证还是注册身份验证导航到特定屏幕。

<NavigationContainer>
  <Stack.Navigator initialRouteName={"LoadingScreen"} headerMode='none'>
    {user ? (
      <>
        <Stack.Screen name='Home' component={Home} />
        <Stack.Screen name='OnBoarding' component={OnBoarding} />
        <Stack.Screen name='Preferences' component={Preferences} />
        <Stack.Screen name='TabNav' component={TabNav} />
      </>
    ) : (
      <>
        <Stack.Screen name='Signup' component={Signup} />
        <Stack.Screen name='Login' component={Login} />
      </>
    )}
    <Stack.Screen name='LoadingScreen' component={LoadingScreen} />
  </Stack.Navigator>
</NavigationContainer>

在此设置中，用户进行身份验证后，应用程序始终导航到第一个屏幕（在本例中为主页）。

也在反应导航文档中他们说：

有条件渲染屏幕时不要手动导航 需要注意的是，使用此类设置时，您不需要通过调用 navigation.navigate('Home') 或任何其他方法手动导航到主屏幕。当 isSignedIn 更改时，React Navigation 将自动导航到正确的屏幕 - 当 isSignedIn 变为 true 时，React Navigation 将自动导航到主屏幕；当 isSignedIn 变为 false 时，React Navigation 将自动导航到登录屏幕。如果您尝试手动导航，您会收到错误消息。

但是，我希望导航是动态的，例如在注册过程后导航到 OnBoarding 屏幕，在登录后导航到主屏幕。

Answer 1

不需要在里面放任何支票

Stack.Navigator

。让我们在应用程序运行时加载所有屏幕，并根据身份验证位在特定屏幕上导航，如

auth_token

等。

当您导航到

login

或

signup

屏幕时，请记住您在经过身份验证后要导航到的屏幕的名称。

现在动态导航该屏幕，如果屏幕嵌套，您可能会遇到导航问题。所以你必须深入研究你的

navigation flow

是如何配置的。

如果是嵌套的，则进行相应的导航。

示例：

简单导航：

navigation.navigate('screenName')

假设我有一个屏幕

StarterStack > Home > specificScreen

对于嵌套导航：

navigation.navigate('StarterStack', {
            screen: 'Home',
            params: {
              screen: specificScreen,
            },
          });

通过牢记这种嵌套流程，您可以轻松调整导航。