Javascript 如何在React Native上将StackNavigator与DroperNavigator和SwitchNavigator一起使用？

TL；DR：我需要这个结果（下面列出了抽屉导航器和StackNavigator导航）：

结构：

---

我有这样的屏幕结构：

在根页面（由“•”表示）中，我需要使用抽屉导航器进行导航，子页面（由“| |表示）我需要使用堆栈导航器进行导航

这是我想要的行为：

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

• Products
|_ Product detail
 |_ Ingredients

• Configuration
• About

• Cart
|_ Checkout
 |_ Finish Checkout 

抽屉：mainprawerwith=>createDrawerNavigator（）

开关导航器：

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

组件：开始检查和欢迎屏幕是一个

StartCheck：这只是检查异步存储上是否有数据，比如 “isFirstRun”，并根据以下内容打开欢迎屏幕或主抽屉 结果

我的代码：

---

屏幕：

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;

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

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

export default AppContainer;

使用此代码，标题不会出现，因此我将抽屉导航器放在StackNavigator中：

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

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

export default AppContainer;

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

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

export default AppContainer;

主干：

const MainStack = createStackNavigator({
    MainDrawer
});

我使用SwitchNavigator修改应用程序容器：

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

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

export default AppContainer;

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

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

export default AppContainer;

但是通过这种方式，标题与侧边栏重叠，如果我使用

标题模式：“无”

，我的标题也会从其他屏幕上消失（不仅仅是容器）

我需要这个结果（上面有抽屉导航器和StackNavigator导航列表）：

我也不知道在哪里可以放置辅助屏幕（使用StackNavigator的导航方法打开）

---

对于这篇大文章，我很抱歉，因为我一直在寻找一个解决方案，但我没有找到……，我将首先以文本形式描述我的想法：

开始屏幕完成任务后，您将进入抽屉导航器，它是您的根节点

• 您的抽屉将呈现StackNavigator或纯组件屏幕。 因此，抽屉应具有以下路径：
• AccountStack | AuthStack
• 产品策略
• 配置屏幕
• 关于屏幕
• 检查分队

始终显示标题

• 所有StackNavigator都附带了头///done，用于在堆栈中呈现的屏幕

• 对于像About screen这样的纯组件，您可以创建一个自定义头并在这些组件中手动添加它

或“我认为不推荐”

• 在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
  });
  

---

像这样定义createSwitchNavigator

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

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

---

你试过把StackNavigators嵌套在抽屉里吗？怎么做？你可以举个例子吗？老兄，第二个选择奏效了，我在两年前的一个项目中使用了它，我不想使用它，因为这显然是一个不好的做法，也似乎不是正确的方法，但显然，对于如此简单的事情，它仍然是唯一的解决方案。我看到几个人有同样的问题，直到今天，开发人员还没有实现任何东西来解决这个问题。无论如何，谢谢你。