无法让DrawerNavigator在React Navigation中工作

Question

我整个页面的代码包含在下面，我的整个仓库在这里： https://github.com/practicia1234/Practicia/commit/d66a23beece1b293c51b4b791f546a2351e6351b

。我不知道怎么能让这个抽屉导航工作。对于我的模型，我使用了here中的教程。这是该教程的repo，因为它具有与我类似的设置，这意味着前几个屏幕是注册和登录屏幕，并且没有向用户显示抽屉。我不确定我在这里做错了什么，如果有人能帮我一点，我会非常感激。试图第一次了解抽屉导航。谢谢！

以下是我得到的错误：

    import React from 'react';
import { Text, Animated, Easing } from 'react-native';
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';

// Home scenes
import Home from '../scenes/Home';
import Dashboard from '../scenes/Dashboard';


// Authentication scenes
import Login from '../scenes/authentication/Login';
import SignUpStep from '../scenes/authentication/SignUpStep';
import SelectTeachers from '../scenes/authentication/SelectTeachers';


// import Dashboard from '../components/Dashboard'
// import FeedScreen from '../components/FeedScreen'
import AwardsScreen from '../scenes/award/AwardsScreen';
// import StudentsScreen from '../components/StudentsScreen'
import GameOnScreen from '../scenes/game/GameOnScreen';

// All practice scenes
import AllPractice from '../scenes/practice/AllPractice';
import Practice from '../scenes/practice/Practice';
import PlayingTests from '../scenes/practice/PlayingTests';
import Questions from '../scenes/practice/Questions';
import Individuals from '../scenes/students/individuals';
import FirstScreen from '../scenes/drawer/FirstScreen';
import SecondScreen from '../scenes/drawer/SecondScreen';
import ThirdScreen from '../scenes/drawer/ThirdScreen';

// Group
import Groups from '../scenes/students/groups';

// Upload
import UploadsScreen from '../scenes/upload/UploadsScreen';
import Pending from '../scenes/students/pending';
//import DrawerContainer from '.../components/DrawerContainer'

// const noTransitionConfig = () => ({
//   transitionSpec: {
//     duration: 0,
//     timing: Animated.timing,
//     easing: Easing.step0
//   }
// });
// Constant for tab menus
const submissionMenu = {
  screen: TabNavigator({
    All: { screen: AllPractice },
    Practice: { screen: Practice },
    PlayingTests: { screen: PlayingTests },
    Questions: { screen: Questions }
  }, {
    tabBarPosition: 'top',
    flex: 2 / 3,
    tabBarOptions: {
      activeTintColor: '#33ACDE',
      labelStyle: {
          fontSize: 12,
            },
      tabStyle: {
        width: 50,
                },
    }
  }
  )
};
const studentMenu = {
  screen: TabNavigator({
    Individuals: { screen: Individuals },
    Groups: { screen: Groups },
    Pending: { screen: Pending }
  }, {
    tabBarPosition: 'top',
    flex: 2 / 3,
    tabBarOptions: {
      activeTintColor: '#33ACDE',
      labelStyle: {
          fontSize: 12,
            },
      tabStyle: {
        width: 50,
                },
    }
  }
  )
};
const DrawerStack = DrawerNavigator({
  screen1: { screen: FirstScreen },
  screen2: { screen: SecondScreen },
  screen3: { screen: ThirdScreen },
});

const DrawerNavigation = StackNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
  headerMode: 'float',
  navigationOptions: ({ navigation }) => ({
    headerStyle: { backgroundColor: '#4C3E54' },
    title: 'Welcome!',
    headerTintColor: 'white',
  })
});

const LoginStack = StackNavigator({
  home: { screen: Home },
  signup: { screen: SignUpStep },
  login: { screen: Login },
  selectTeachers: { screen: SelectTeachers },
  dashboard: {
      screen: TabNavigator({
        Submissions: submissionMenu,
        Students: studentMenu,
        Awards: { screen: AwardsScreen },
        GameOn: { screen: GameOnScreen },
        Uploads: { screen: UploadsScreen }
      }, {
        tabBarPosition: 'bottom',

        tabBarOptions: {
          activeTintColor: '#33ACDE',
          labelStyle: {
              fontSize: 12,
                },
          tabStyle: {
            width: 50,
                    }

        }
      }),
      },
},
{
  headerMode: 'float',
  navigationOptions: {
    headerStyle: { backgroundColor: '#E73536' },
    title: 'You are not logged in',
    headerTintColor: 'white'
  }
});

const navigator = StackNavigator({
  loginStack: { screen: LoginStack },
  drawerStack: { screen: DrawerNavigation }
}, {
  // Default config for all screens
  headerMode: 'none',
  title: 'Main',
  initialRouteName: 'loginStack'
});
export default navigator;

Answer 1

执行navigation.navigate('DrawerOpen')时。 那个'导航'不是抽屉，而是StackNavigation的。

如果您想要访问抽屉的导航，您应该在Drawer中的子屏幕上调用它，如FirstScreen，SecondScreen或ThirdScreen。

从这些屏幕执行this.props.navigation.navigate('DrawerOpen')。