使用类组件的 React Navigation 5 身份验证流程

Question

我在类组件中使用反应导航 5 我有两个用于 BeforeLogin 堆栈的堆栈，其中包括 SignIn 和 Sign Up 另一个堆栈有不同的底部选项卡屏幕的堆栈。 但无法在登录功能中使用 this.props.navigation.navigate 导航到登录后主堆栈。

有什么解决办法吗？

Answer 1

为此，只需有条件地将路线添加到您的导航器。因此，如果您的用户通过了身份验证，请将路由传递到您的主堆栈。如果他未通过身份验证，请将路由传递到您的登录/注册堆栈。

他们文档中的示例

return (
  <Stack.Navigator>
    {state.userToken == null ? ( 
      // No token found, user isn't signed in
      <Stack.Screen
        name="SignIn"
        component={SignInScreen}
        options={{
          title: 'Sign in',
          // When logging out, a pop animation feels intuitive
          // You can remove this if you want the default 'push' animation
          animationTypeForReplace: state.isSignout ? 'pop' : 'push',
        }}
      />
    ) : (
      // User is signed in
      <Stack.Screen name="Home" component={HomeScreen} />
    )}
  </Stack.Navigator>
);

请注意，路线是有条件的，就像我说的那样。如果用户认证状态发生变化，你甚至不需要调用navigate。状态更改将重新呈现此 <Route /> 组件并自行导航到 HomeScreen。

Answer 2

其实我犯了一个错误。我认为导航 v4 中包含切换导航概念。然后我为 auth token 维护了一个全局状态，之后它就可以工作了。实际上导航 v5 要好得多。