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

问题描述 投票:0回答:1

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

<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 屏幕,在登录后导航到主屏幕。

reactjs react-native expo react-navigation
1个回答
0
投票

不需要在里面放任何支票

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

当您导航到

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

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

navigation flow
是如何配置的。

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

示例:

简单导航:

navigation.navigate('screenName')

假设我有一个屏幕

StarterStack > Home > specificScreen

对于嵌套导航:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.