javascript - 抽屉未在本机中打开

Question

我在材质顶部导航中使用抽屉导航。

这是我的抽屉导航代码

import { createDrawerNavigator, createStackNavigator } from "react-navigation";
import { UserProfileComponent } from "../components/standalone/userProfile/userProfile.component";
import { RecordMeetingComponent } from "../components/standalone/recordMeeting/recordMeeting.component";
import { ChatBotComponent } from "../components/standalone/chatBot/chatBot.component";
import DrawerScreen from "../components/shared/drawerToggler/drawerToggle.component";
import userDashBoardTabsStack from "./userDashBoardTabs";

const userDrawerNavigator = createDrawerNavigator({
    Home:{
        screen: userDashBoardTabsStack,
        navigationOptions:{
            drawerLabel: "Home"
        }
    },
    Record: {
        screen: RecordMeetingComponent,
        navigationOptions:{
            drawerLabel: "Record"
        }
    },
    Profile: {
        screen: UserProfileComponent,
        navigationOptions: {
            drawerLabel: "My Profile"
        }
    },
    ChatBot: {
        screen: ChatBotComponent,
        navigationOptions: {
            drawerLabel: "Chat Bot"
        }
    },
    },{
        initialRouteName: "Record",
        contentComponent: DrawerScreen,
        drawerWidth: 300
    }
)
export default userDrawerNavigator;

这是我的标签导航

import { createMaterialTopTabNavigator } from "react-navigation";
import { UserDashboardTodayTab } from "../components/standalone/usersTabs/today/today.component";
import { UserDashboardWeekTab } from "../components/standalone/usersTabs/week/week.component";
import { UserDashboardMonthTab } from "../components/standalone/usersTabs/month/month.component";

const userDashBoardTabsStack = createMaterialTopTabNavigator({
        today:{ 
            screen: UserDashboardTodayTab,
            navigationOptions: (navigation)=>({
                title: "TODAY"
            }),
        },
        week: {
            screen: UserDashboardWeekTab,
            navigationOptions: (navigation)=>({
                title: "WEEK" 
            }),
        },
        month:{
            screen: UserDashboardMonthTab,
            navigationOptions: (navigation)=>({
                title: "MONTH",
                headerTitle: "#000000"
            })
        }
    },{
        order: ["today", "week", "month"],
        tabBarOptions : {
            activeTintColor: "#000000",
            inactiveTintColor: "#ADB2BF",
            pressColor: "#25B7AF",
            indicatorStyle: {
                backgroundColor: "#25B7AF",
            },
            activeBackgroundColor: "#25B7AF",
            style: {
                fontFamily: "nunito_regular",
                backgroundColor: "#ffffff"
            }
        },
    swipeEnabled: true,
    animationEnabled: true,
    lazy: true,
    backBehavior: "initialRoute"
})

export default userDashBoardTabsStack;

我在 createStacknavigator 中调用这两个

import { createStackNavigator } from "react-navigation";
import userDrawerNavigator from "./userDrawer";
import React from "react";
import { TouchableOpacity } from "react-native";
import Icon from "react-native-vector-icons/Feather";

const OnboardingStack = createStackNavigator({

    userDrawerNavigator: {
            screen: userDrawerNavigator
        },
    },{
        navigationOptions: ({ navigation }) => ({
            title: 'ReactNavigation',  // Title to appear in status bar
            headerLeft: 
            <TouchableOpacity  onPress={ () => { navigation.dispatch(DrawerActions.toggleDrawer())} }>
                <MenuImage navigation={ navigation }/>
            </TouchableOpacity>,
            headerStyle: {
                backgroundColor: '#333',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
        })
    },
    {
        initialRouteName: "userDrawerNavigator",
        headerLayoutPreset: "center",
    }
)

const MenuImage = ({navigation}) => {
    if(!navigation.state.isDrawerOpen){
        return <Icon name="menu" color="#000000"/>
    }else{
        return <Icon name="arrow-left" color="#000000"/>
    }
}

export default OnboardingStack;

并在切换导航器中迭代这些组件

import { createSwitchNavigator, createAppContainer } from "react-navigation";
import { SplashComponent } from "../components/standalone/splash/splash.component";
import AuthStack from "./loggedOut";
import UserStack from "./loggedIn";
import OnboardingStack from "./freshInstall";

export const AppStack = createAppContainer(createSwitchNavigator(
    {
        Splash: SplashComponent,
        LoggedIn: UserStack,
        LoggedOut: AuthStack,
        Onboarding: OnboardingStack
    },
    {
        initialRouteName: "Splash"
    }
))

这是我的抽屉自定义组件

class DrawerScreen extends React.Component {


  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
    this.props.navigation.dispatch(DrawerActions.closeDrawer())
  }

  render () {
    return (
      <View>
        <ScrollView>
          <View>
            <View >
              <Text onPress={this.navigateToScreen('RecordMeetingComponent')}>
                Record
              </Text>
            </View>
            <View>
              <Text onPress={this.navigateToScreen('UserProfileComponent')}>
               My Profile
              </Text>
            </View>
            <View >
              <Text onPress={this.navigateToScreen('ChatBotComponent')}>
              Chat Bot
              </Text>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

DrawerScreen.propTypes = {
  navigation: PropTypes.object
};

export default DrawerScreen;

但是抽屉导航没有出现在屏幕上。我在这里做错了什么？