标签内的React-Native导航抽屉

Question

我正在制作一个React-Native应用程序，并且正在使用React-Native导航。我目前有一个“堆栈”导航和一个“选项卡”导航，我也想包括一个“抽屉”导航。

我想要实现的是当用户点击底部棕褐色导航上的“菜单”选项卡时，在侧面打开“抽屉菜单”。

现在这是我拥有的导航代码。

import React from 'react'
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation'
import { View, StatusBar, Text } from 'react-native'
// import FontAwesome from 'react-native-vector-icons/FontAwesome5'
import IconFontawesome from 'react-native-vector-icons/FontAwesome'
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons'
import { MenuProvider } from 'react-native-popup-menu';

// screens
import Splashscreen from './src/screens/Splashscreen/Splashscreen'
import ProfileSetup from './src/screens/ProfileSetup/ProfileSetup'
import UserCreation from './src/screens/UserCreation/UserCreation'
import Login from './src/screens/Login/Login'
import Signup from './src/screens/Signup/Signup'
...

// Tabs
import MenuScreen from './src/screens/TabScreens/MenuScreen/MenuScreen'
import HomeScreen from './src/screens/TabScreens/HomeScreen/HomeScreen'
import BrandScreen from './src/screens/TabScreens/BrandScreen/BrandScreen'
import DeviceScreen from "./src/screens/TabScreens/DeviceScreen/DeviceScreen";

// Menu Screens
import AccountScreen from './src/screens/TabScreens/MenuScreen/AccountScreen/AccountScreen'
import HelpScreen from './src/screens/TabScreens/MenuScreen/HelpScreen/HelpScreen'
import PrivacyScreen from './src/screens/TabScreens/MenuScreen/PrivacyScreen/PrivacyScreen'
import ProfileScreen from './src/screens/TabScreens/MenuScreen/ProfileScreen/ProfileScreen';

import configureStore from "./src/state/store";
import { Provider } from "react-redux";
import { Root } from "native-base";

const DashboardTabNavigator = createBottomTabNavigator(
    {
        HomeScreen: HomeScreen,
        BrandScreen: BrandScreen,        
        DeviceScreen: DeviceScreen,
        MenuScreen: MenuScreen
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;

                if (routeName === 'MenuScreen') {
                    iconName = `menu`
                } else if (routeName === 'BrandScreen') {
                    iconName = `domain`
                } else if (routeName === 'HomeScreen') {
                    iconName = `home`
                } else if (routeName === 'DeviceScreen') {
                    iconName = `television`;
                } else if (routeName === 'DataScreen') {
                    iconName = `chart-line-variant`
                } else if (routeName === 'SearchScreen') {
                    iconName = `thermometer`
                }
                // return <IconFontawesome name={iconName} size={30} color={focused ? '#fff' : '#c0d3d6'} />
                return <IconMaterial name={iconName} size={30} color={focused ? '#fff' : '#c0d3d6'} />
            },
            tabBarLabel: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let labelName;
                if (routeName === 'MenuScreen') {
                    labelName = `MENU`
                } else if (routeName === 'BrandScreen') {
                    labelName = `BRANDS`
                } else if (routeName === 'HomeScreen') {
                    labelName = `HOME`
                } else if (routeName === 'DataScreen') {
                    labelName = `DATA`
                } else if (routeName === 'DeviceScreen') {
                    labelName = `DEVICES`
                } else if (routeName === 'SearchScreen') {
                    labelName = `Store`
                }
                return <Text style={focused ? { textAlign: 'center', fontSize: 11, color: '#fff', fontWeight: '600', marginTop: -5, marginBottom: 5 } : { textAlign: 'center', fontSize: 11, marginTop: -5, marginBottom: 5, color: '#C0D3D6' }}>{labelName}</Text>
            }
        }),
        tabBarOptions: {
            activeTintColor: '#ff3402',
            inactiveTintColor: '#eaeaea',
            style: {
                backgroundColor: '#00A5AC',
                height: 75
            },
            labelStyle: {
                color: '#fff'
            }
        },
        initialRouteName: 'HomeScreen',
        navigationOptions: {
            header: null
        }
    }
)

const AppNavigator = createStackNavigator(
    {
        Splashscreen: Splashscreen,
        UserCreation: UserCreation,
        Login: Login,
        Signup: Signup,
        Shop:Shop,
        Location:Location,
        ...
    },
    {
        initialRouteName: 'Splashscreen',
        navigationOptions: {
            header: null
        }
    }
);

const AppContainer = createAppContainer(AppNavigator)

export default class App extends React.Component {
    store = configureStore();

    componentDidMount(){
        console.disableYellowBox = true;
    }

    render() {

        return (
            <Provider store={this.store}>
                <Root>
                    <MenuProvider>
                        <View style={{ flex: 1 }}>
                            <AppContainer />
                            <StatusBar translucent backgroundColor='transparent' barStyle='light-content' />
                        </View>
                    </MenuProvider>
                </Root>
            </Provider>
        )
    }
}

我尝试将抽屉添加到“菜单”选项卡中，但没有打开抽屉，而是将其重定向到抽屉内的第一个屏幕。

我对如何在不做任何改动的情况下进行此操作感到有些困惑，因此，我们将不胜感激。