如何在身份验证流程中导航到其他反应片段中的特定屏幕？

Question

假设存在这样的身份验证流程：

state.userToken == null ? (
  <>
    <Stack.Screen name="Onboarding" component={OnboardingScreen} />
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
    <Stack.Screen name="ResetPassword" component={ResetPassword} />
  </>
) : (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />   //User logout action
    <Stack.Screen name="ChangePassword" component={ChangePasswordScreen} /> //Navigation link to ResetPassword
  </>
);

假设在 ChangePasswordScreen 中更改密码期间，用户忘记了当前密码并想导航到其他 React 片段中的 ResetPassword 屏幕。

或者假设从 ProfileScreen 注销后，用户应该被导航到登录屏幕。

目前它导航到导航堆栈中第一个也是最重要的屏幕，即注销时的 OnboardingScreen。

Answer 1

您可以试试下面的例子：

{state.needsOnoarding === false ? (
          <>
            {state.userToken == null ? (
              <>
                <Stack.Screen name="SignIn" component={SignInScreen} />
                <Stack.Screen name="SignUp" component={SignUpScreen} />
                <Stack.Screen name="ResetPassword" component={ResetPassword} />
                <Stack.Screen name="Onboarding" component={OnboardingScreen} />
              </>
            ) : (
              <>
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Profile" component={ProfileScreen} />   //User logout action
                <Stack.Screen name="ChangePassword" component={ChangePasswordScreen} /> //Navigation link to ResetPassword
                <Stack.Screen name="ResetPassword" component={ResetPassword} />
              </>
            )}
          </>
        ) : (
            <>
              <Stack.Screen name="Onboarding" component={OnboardingScreen} />
            </>
          )}

如果用户进行了入职流程，您需要存储（使用 SQLite、realm（目前不支持 Hermes）、RocksDB 或您已经用于存储信息的任何其他东西）。如果这样做，默认情况下不会显示入职流程，但会显示登录屏幕。如果您在登录屏幕上有路线，则仍然可以进行入职。

对于您的重置密码，我认为您可以在不同的堆栈中添加两次相同的屏幕。但是你也应该考虑一下你的设计，当你已经登录时，如果你忘记了你当前的密码来显示相同的重置密码屏幕，这可能与你登录时的设计不同，这是否合乎逻辑。

如何在身份验证流程中导航到其他反应片段中的特定屏幕？

How to navigate to specific screen in other react fragment during auth flow?

reactjs

react-native

react-navigation