javascript - 如何在 React Native 上将 StackNavigator 与 DrawerNavigator 和 SwitchNavigator 一起使用？

Question

TL;DR:我需要这个结果(使用下面列出的 DrawerNavigator 和 StackNavigator 导航):

结构:

---

我有这样的屏幕结构:

在根页面(由“•”表示)中，我需要使用 DrawerNavigator 完成导航，而子页面(由“|_”表示)需要使用StackNavigator。

这是我想要得到的行为:

• Account
|_ Create Account
|_ Login
|_ Forget Password

• Products
|_ Product detail
 |_ Ingredients

• Configuration
• About

• Cart
|_ Checkout
 |_ Finish Checkout 

抽屉:MainDrawer with => createDrawerNavigator()

• Account
• Products
• Configuration
• About
• Cart

切换导航器:

Start: StartCheck, // Screen component
App: MainDrawer, // Drawer
Welcome: WelcomeScreen, // Screen component

组件:StartCheck 和WelcomeScreen 是一个 <Component />

StartCheck: this just check if have data on AsyncStorage, something like "isFirstRun", and open WelcomeScreen or MainDrawer according of result [like this documentation].

我的代码:

---

屏幕:

const Screens = {
    account: {
        screen: AccountScreen,
        path: 'account'
    },
    products: {
        screen: ProductsScrren,
        path: 'products'
    },
    configuration: {
        screen: ConfigurationScrren,
        path: 'configuration'
    },
    about: {
        screen: AboutScrren,
        path: 'about'
    },
    cart: {
        screen: CartScrren,
        path: 'cart'
    },
};

主抽屉:

const MainDrawer = createDrawerNavigator({
    ...Screens
}, {
    contentComponent: Sidebar,
    initialRouteName: 'products',
});

带有 SwitchNavigator 的应用容器:

const AppContainer = createAppContainer(createSwitchNavigator(
    {
        StartCheck: StartCheck, // Component

        App: MainDrawer, // Drawer
        Welcome: WelcomeScreen, // Component
    },
    {
        initialRouteName: 'StartCheck',
    }
));

export default AppContainer;

使用这段代码，Header 不会出现，所以我将 DrawerNavigator 放在 StackNavigator 中:

主堆栈:

const MainStack = createStackNavigator({
    MainDrawer
});

然后我用 SwitchNavigator 修改 App Container:

const AppContainer = createAppContainer(createSwitchNavigator(
    {
        StartCheck: StartCheck, // Component

        App: MainStack, // Stack
        Welcome: WelcomeScreen, // Component
    },
    {
        initialRouteName: 'StartCheck',
    }
));

export default AppContainer;

但这样一来，标题重叠侧边栏，如果我使用headerMode: 'none' ，我的标题也从其他屏幕上消失了(不仅仅是容器)。

我需要这个结果(上面有 DrawerNavigator 和 StackNavigator 导航列表):

而且我也不知道副屏放在哪里(用StackNavigator的导航方式打开)。

抱歉这个大帖子，是我尝试尽可能详细，因为我一直在寻找解决方案一段时间但我还没有找到...

Answer 1

我先以文字的形式描述一下我的想法:

在您的“开始”屏幕完成其工作后，您将进入抽屉导航器，这是您的根节点

• 您的抽屉将呈现 StackNavigator 或 Pure Component|Screen。所以，Drawer 应该有这些路由:
• 帐户堆栈 | AuthStack。
• ProductsStack。
• 配置屏幕。
• 关于屏幕。
• CheckoutStack。

要一直显示标题

• 所有 StackNavigator 都附带 header ///用于在堆栈中呈现的屏幕。

• 对于像“关于”屏幕这样的纯组件，您可以创建自定义 header 并在这些组件中手动添加它。

或“我认为不推荐”

• 在 stacknavigator 中渲染每个纯屏幕，例如关于屏幕，只是为了节省您创建自定义标题的时间。

  const MainDrawer = createDrawerNavigator({
    Account: AccountStack,
    Product: ProductsStack,
    Configuration: ConfigScreen, // Pure Component
    About: AboutScreen, // Pure Component
    Cart: CartStack
  });
  
  // Ex stack:
  const AccountStack = createStackNavigator({
    CreateAcount: SignUpScreen,
    Login: LoginScreen,
    ForgotPassword: ForgotPasswordScreen
  });