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

TL; DR：我需要此结果（下面列出了DrawerNavigator和StackNavigator导航）：



结构体：



我有这种屏幕结构：

在根页面（由“•”表示）中，我需要使用DrawerNavigator进行导航，而子页面（由“ | _”表示）则需要通过StackNavigator进行导航。

这是我想要得到的行为：

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

• Products
|_ Product detail
 |_ Ingredients

• Configuration
• About

• Cart
|_ Checkout
 |_ Finish Checkout

抽屉：MainDrawer，带有=> createDrawerNavigator（）

• Account
• Products
• Configuration
• About
• Cart

SwitchNavigator：

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

组件：StartCheck和WelcomeScreen是<Component />


  StartCheck：这只是检查AsyncStorage上是否有数据，例如
  “ isFirstRun”，然后根据以下内容打开WelcomeScreen或MainDrawer
  结果 [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的导航方法打开）。

很抱歉，因为我一直在寻找解决方案，但是我没有找到...，我试图尽可能地详细介绍...

最佳答案

我将首先以文字形式描述我的想法：

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


您的抽屉将呈现StackNavigator或Pure Component | Screen。
因此，抽屉应具有以下路线：
AccountStack | AuthStack。
产品堆栈。
配置屏幕。
关于屏幕。
CheckoutStack。


一路显示标题


所有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
});