如何在 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與=> createDrawerNavigator（）

• Account
• Products
• Configuration
• About
• Cart

開關導航器：

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

主抽屜：

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 應該有這些路由：
• 帳戶堆棧 | 驗證堆棧。
• 產品堆棧。
• 配置屏幕。
• 關於屏幕。
• 結帳堆棧。

一直顯示標題

• 所有 StackNavigator 都帶有標題 /// done 用於在堆棧中呈現的屏幕。

• 對於像關於屏幕這樣的純組件，您可以創建一個自定義標題並在這些組件中手動添加它。

或“從我的角度來看不推薦”

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