使用选项卡导航器和抽屉导航器来反应原生

我是React-native的新手，我正在尝试为我的应用程序设置导航 .

我有一个堆栈导航，引导我从登录到选项卡导航器 . 选项卡导航器有4个选项卡（HomeRoutes，ProductCatalogueRoutes，MyCustomerRoutes和DrawerRoutes） . 最后一个应该在点击时打开抽屉导航器 . 但是，当我点击第4个选项卡时，出现抽屉导航的第一个屏幕，因为我无法打开抽屉导航 .

我觉得我错过了一些基本的东西，但即使在阅读了其他几个问题之后，我也没有理解 . 如果您需要任何进一步的信息，请告诉我 .

注意：或者，我也可以将抽屉导航设置在选项卡导航器的左侧 Headers 位置 .

注2：我还将DrawerNavigation更改为createDrawerNavigation等 .

谢谢你的帮助！

import React, { Component } from 'react';
import {StyleSheet, Text, View} from 'react-native';


import {DrawerNavigator, StackNavigator, TabNavigator} from 'react-navigation'
import Icon from 'react-native-vector-icons/FontAwesome';

import MyCustomers from "./mycustomers";
import ProductCatalogue from "./productcatalogue";

import Login from "./login";
import Home from "./home";

import Plain from "./plain";


const ProductCatalogueRoutes = StackNavigator({
    ProductCatalogue: { screen: ProductCatalogue },
})

const MyCustomerRoutes = StackNavigator({
    MyCustomers: { screen: MyCustomers },
})

const DrawerRoutes = DrawerNavigator({
    Plain: { screen: Plain},
    MyCustomers: {screen: MyCustomerRoutes},
    ProductCatalogue: {screen:ProductCatalogueRoutes},  
})

const HomeRoutes = StackNavigator({
    Home: { screen: Home },
    // DrawerRoutes: { screen: DrawerRoutes}, //if the drawer menu is part of the header
})

const Tabs = TabNavigator({
    Home: { screen: HomeRoutes },
    MyCustomers: {screen: MyCustomerRoutes},
    ProductCatalogue: {screen: ProductCatalogueRoutes},
    Menu: {screen: DrawerRoutes}
    },
    {order: [ 'Home', 'ProductCatalogue', 'MyCustomers' , 'Menu'],
     animationEnabled:true,
    }
);


export const Stack = StackNavigator({
        Login: {screen: Login},
        TabNavigation: {screen: Tabs}
    },
    {initialRouteName: 'Login',
        header: null,
        navigationOptions: {
            headerVisible: false,
            header: null,
        },
    });


const styles = StyleSheet.create({
    title: {
        color: '#ff5d00',
        fontSize: 15,
        textAlign: 'center',
        marginTop: 2,
        opacity: 0.9,
    }
});