收到错误“路线'，'的组件必须是React组件。”

Question

我已经检查了是否都已使用“导出默认值”导出，并且一切正常。 在添加抽屉之前，一切正常，但是尝试将抽屉添加到我的应用程序时出现此错误，但无法解决。

这是我的App.js代码：

import React from 'react';
import { createSwitchNavigator, createMaterialTopTabNavigator, createAppContainer, createStackNavigator, createDrawerNavigator } from "react-navigation";
import { Icon } from 'native-base';
import HomeScreen from './app/components/HomeScreen';
import FoodScreen from './app/components/FoodScreen';
import FoodEventLogScreen from './app/components/FoodEventLogScreen';
import WaterScreen from './app/components/WaterScreen';
import WaterEventLogScreen from './app/components/waterEventLogScreen';
import SettingsScreen from './app/components/SettingsScreen';
import SettingsPetProfileScreen from './app/components/SettingPetProfileScreen';
import LoginScreen from './app/components/LoginScreen';
import LoginAndPetCheck from './app/components/LoginAndPetCheck';
import AlarmsScreen from './app/components/AlarmsScreen';
import DrawerScreen from './app/components/DrawerScreen';

const HomeScreenStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({ navigation }) => ({
        header: null,
      })
    },
    FoodEventLog: {
      screen:FoodEventLogScreen,
    },
    WaterEventLog: {
      screen:WaterEventLogScreen,
    }
  },
  {
    defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: '#FF7B62',
          height: 35
        },
        headerTintColor: 'white',
    }
  }
);

const FoodScreenStack = createStackNavigator(
  {
    Food: {
      screen: FoodScreen,
      navigationOptions: ({ navigation }) => ({
        header: null,
      })
    },
    FoodEventLog: {
      screen:FoodEventLogScreen,
    },
  },
  {
    defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: '#FF7B62',
          height: 35
        },
        headerTintColor: 'white',
    }
  }
);

const WaterScreenStack = createStackNavigator(
  {
    Water: {
      screen: WaterScreen,
      navigationOptions: ({ navigation }) => ({
        header: null,
      })
    },
    WaterEventLog: {
      screen:WaterEventLogScreen,
    }
  },
  {
    defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: '#FF7B62',
          height: 35
        },
        headerTintColor: 'white',
    }
  }
);

const SettingsScreenStack = createStackNavigator(
  {
    Settings: {
      screen: SettingsScreen,
      navigationOptions: ({ navigation }) => ({
        header: null,
      })
    },
    SettingsPetProfile: {
      screen: SettingsPetProfileScreen,
    },
    Alarms: {
      screen: AlarmsScreen,
    },
  },
  {
    defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: '#FF7B62',
          height: 35
        },
        headerTintColor: 'white',
    }
  }
);

const DrawerNavigator = createDrawerNavigator(
  {
    Tabs: AppContainer,
  },
  {
    contentComponent: DrawerScreen,
  }
)

const AppNavigator = createMaterialTopTabNavigator(  
  {
    Home: HomeScreenStack,   
    Food: FoodScreenStack,
    Water: WaterScreenStack,
    Settings: SettingsScreenStack, 
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home';
        } else if (routeName === 'Food') {
          iconName = 'restaurant';
        } else if (routeName === 'Water') {
          iconName = 'water';
        } else if (routeName === 'Settings') {
          iconName = 'settings';
        }
        return <Icon name={iconName} style={{fontSize: 25, color:tintColor}} />;
      },
    }),
    tabBarPosition: 'bottom',
    initialRouteName: "Home",
    lazy: true,
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: '#FFF',
      inactiveTintColor: '#000111',
      indicatorStyle: {backgroundColor: 'white'},
      style: {
        backgroundColor: '#FF7B62',
      }
    },
  }
);

const AuthNavigator = createStackNavigator(
  {
    Login: LoginScreen,
    PetProfile: SettingsPetProfileScreen ,
  },
  {
    initialRouteName: 'Login'
  }
);

const AppContainer = createSwitchNavigator(
  {
    LoginAndPetCheck: LoginAndPetCheck,
    Auth: AuthNavigator,
    Main: AppNavigator,
  },
)

const MyApp = createAppContainer(DrawerNavigator);

export default class App extends React.Component {
  render() {
    return (
      <MyApp />
    )
  }
}

我也更改了代码顺序，只是无法使其正常工作……请问任何想法或提示？