路线应用的组件必须是React组件

Question

我的代码库如下

遇到此错误

路由应用程序的组件必须是React组件

我在SO上看到了很多类似的问题，以及那里的解决方案，但作为一个初学者还无法解决，尝试为每个类添加export / export default 但不起作用

https://snack.expo.io/@mparvez19861/drawer-navigation?session_id=snack-session-hyLuO4xPa

import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet
} from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from
  'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

class HeaderNavigationBar extends Component {
  render() {
    return (
      <View style={{
        height: 70,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
      }}>
        <TouchableHighlight style={{ marginLeft: 10, marginTop: 15 }}
          onPress={() => { this.props.navigation.openDrawer() }}>
          {/* <Image
style={{ width: 32, height: 32 }}
source={{uri: 'https://png.icons8.com/ios/2x/menu-filled.png'}}
/> */}
          <Icon name='md-menu' size={35} />

        </TouchableHighlight>
      </View>
    );
  }
}

export class HomeScreen extends Component {

  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
      }}>

        <HeaderNavigationBar {...this.props} />
        <View style={{
          flex: 1,
          backgroundColor: '#4885ed',
          alignItems: 'center',
          justifyContent: 'center'
        }}>

          <Text style={{ fontWeight: 'bold', fontSize: 22, color: 'white' }}>
            This is Home Screen
        </Text>

        </View>
      </View>);
  }
}

export class InfoScreen extends Component {

  render() {
    return (<View style={{
      flex: 1,
      flexDirection: 'column',
    }}>
      <HeaderNavigationBar {...this.props} />
      <View style={{
        flex: 1,
        backgroundColor: '#4734ac',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
        <Text style={{ fontWeight: 'bold', fontSize: 22, color: 'white' }}>
          This is Info Screen
</Text>

      </View>
    </View>);
  }

}
class SignInScreen extends React.Component {
  static navigationOptions = {
    title: 'Please sign in',
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Sign in!" onPress={this._signInAsync} />
      </View>
    );
  }

  _signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('App');
  };
}

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

const drNav = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Info: {
      screen: InfoScreen
    }
  }
)

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: drNav,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

任何帮助表示赞赏

谢谢