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 

抽屉：带 => createDrawerNavigator() 的MainDrawer

• Account
• Products
• Configuration
• About
• Cart

切换导航器：

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 的导航方法打开）。

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

Answer 1

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

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

• 您的抽屉将呈现 StackNavigator 或 Pure Component|Screen。所以，抽屉应该有这些路线：
• 帐户堆栈 | 验证堆栈。
• 产品栈。
• 配置屏幕。
• 关于屏幕。
• 结帐堆栈。

一直显示标题

• 所有 StackNavigator 都附带标题 /// 为在堆栈中呈现的屏幕完成。

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

或“从我的角度来看不推荐”

• 在 stacknavigator 中渲染每个纯屏幕，例如 About 屏幕，以节省您创建自定义标题的时间。

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