React Native错误组件必须是React组件

Question

因此，我通常对本机和JS都有新的反应，我在本机移动开发方面拥有丰富的背景，并且我想了解有关Web Apps的更多信息。因此，我尝试从反应本机开始，以体验这种体验。

我想使用createDrawerNavigator做一个侧面菜单，所以我创建了以下组件：

// code for the menu
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";


import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const App = createDrawerNavigator({
    HomeScreen: {
        screen: HomeScreen
    },
    LinksScreen: {
        screen: LinksScreen
    },
    SettingsScreen: {
        screen: SettingsScreen
    }
    }, 
    {
      drawerWidth: 300
});

export default createAppContainer(App);

// HomeScreen.js

import React from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,  
} from 'react-native';
import { WebBrowser } from 'expo';
import { DrawerNavigator } from 'react-native-navigation';
import { MonoText } from '../components/StyledText';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import Router from './MenuNavigator';
export default class HomeScreen extends React.Component {
  static navigationOptions = {
header: 'Vapeself 2',
  };

  render() {
const App = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
        screen: MyNotificationsScreen,
  },
});
const MyApp = createAppContainer(App);
this.props.navigation.dispatch(DrawerActions.openDrawer());

    return (
        <Router/>
        );

  }

// LinkScreen.js

import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { ExpoLinksView } from '@expo/samples';

export default class LinksScreen extends React.Component {
  static navigationOptions = {
    title: 'Links',
  };

  render() {
    return (
      <ScrollView style={styles.container}>
        {/* Go ahead and delete ExpoLinksView and replace it with your
           * content, we just wanted to provide you with some helpful links */}
        <ExpoLinksView />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },

});
// SettingsScreen.js

import React from 'react';
import { ExpoConfigView } from '@expo/samples';

export default class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: 'app.json',
  };

  render() {
    /* Go ahead and delete ExpoConfigView and replace it with your
     * content, we just wanted to give you a quick view of your config */
    return <ExpoConfigView />;
  }
}

// code for the menu import React from 'react'; import { Platform } from 'react-native'; import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation"; import HomeScreen from '../screens/HomeScreen'; import LinksScreen from '../screens/LinksScreen'; import SettingsScreen from '../screens/SettingsScreen'; const App = createDrawerNavigator({ HomeScreen: { screen: HomeScreen }, LinksScreen: { screen: LinksScreen }, SettingsScreen: { screen: SettingsScreen } }, { drawerWidth: 300 }); export default createAppContainer(App); // HomeScreen.js import React from 'react'; import { Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, Dimensions, } from 'react-native'; import { WebBrowser } from 'expo'; import { DrawerNavigator } from 'react-native-navigation'; import { MonoText } from '../components/StyledText'; import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation"; import Router from './MenuNavigator'; export default class HomeScreen extends React.Component { static navigationOptions = { header: 'Vapeself 2', }; render() { const App = createDrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, }); const MyApp = createAppContainer(App); this.props.navigation.dispatch(DrawerActions.openDrawer()); return ( <Router/> ); } // LinkScreen.js import React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; import { ExpoLinksView } from '@expo/samples'; export default class LinksScreen extends React.Component { static navigationOptions = { title: 'Links', }; render() { return ( <ScrollView style={styles.container}> {/* Go ahead and delete ExpoLinksView and replace it with your * content, we just wanted to provide you with some helpful links */} <ExpoLinksView /> </ScrollView> ); } } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 15, backgroundColor: '#fff', }, }); // SettingsScreen.js import React from 'react'; import { ExpoConfigView } from '@expo/samples'; export default class SettingsScreen extends React.Component { static navigationOptions = { title: 'app.json', }; render() { /* Go ahead and delete ExpoConfigView and replace it with your * content, we just wanted to give you a quick view of your config */ return <ExpoConfigView />; } } 我不知道发生了什么事，因为代码不起作用，并且出现了这种错误路由“ HomeScreen”的组件必须是React组件。但事实是它实际上可以与TabNavigator一起使用。所以我真的不明白。

预先感谢您的帮助。