使用 Stack Navigation 和 Tab Navigation 构建 React Navigation v5 堆栈

Question

我目前正在尝试了解如何使用 v5 构建我的 React Navigation 堆栈，而不是使用 switchNavigator。

我的基本应用结构是这样的（将在下面发布一个流程的图像）：

check Auth    
    -> signed in yes
      -> tab navigation (with stack navigators nested within)    
    -> signed in no
      -> nested stack navigator

但我就是不知道应该如何构建应用程序的根目录。我不知道如何将我的选项卡导航器和堆栈导航器组合在一起以使我的应用程序从头到尾发挥作用。

（值得注意的是，'check Auth'是一个实际的屏幕，而不是一个条件）

这是我的插图，展示了我的项目布局：

有人可以建议我如何构建它吗？任何关于如何最好地做到这一点的提示或一般结构/建议将不胜感激！

Answer 1

所以我过去通常做的是渲染，或者不是两者都渲染。例如，根导航可能如下所示：

import { NavigationContainer as RootNavigationContainer } from "@react-navigation/native";


const Navigation = () => {
  const { someToken } = useContext(SomeContext);

  return (
    <RootNavigationContainer>
      {!someToken ? <AuthStack /> : <MainStack />}
    </RootNavigationContainer>
  );
};

应在显示初始屏幕时确定用户的身份验证状态，使用单独的组件只会混淆 IMO 流程。如果用户通过了身份验证，您可以设置一些状态（在示例中，在上下文中设置了一个令牌），该状态将驱动显示哪个导航堆栈。

在我的示例中，AuthStack 将包含您的用户未经身份验证的所有屏幕 - 因此您的登录、注册等。MainStack 将包含应该只显示给经过身份验证的用户的屏幕。

FaceID 之类的东西应该包含在您的登录流程中。