Как использовать StackNavigator с DrawerNavigator и SwitchNavigator в React Native?

Question

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 в соответствии с результатом [как эта документация] .

Мой код:

---

Экраны:

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'
    },
};

MainDrawer:

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;

С этим кодом заголовок не отображается, поэтому я помещаю DrawerNavigator в StackNavigator:

MainStack:

const MainStack = createStackNavigator({
    MainDrawer
});

И яизменить Контейнер приложений с SwitchNavigator:

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

Сначала я опишу свою идею в текстовой форме:

После того, как ваш стартовый экран завершит свою работу, вы попадете в навигатор ящиков, который является вашим корневым узлом .1004 *

• Ваш ящик будет отображать либо StackNavigator, либо Pure Component | Screen.Итак, у Drawer должны быть следующие маршруты:
• AccountStack |AuthStack.
• ProductsStack.
• Экран конфигурации.
• Об экране.
• 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
  });
  

Answer 2

Определите ваш createSwitchNavigator следующим образом

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

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