React Native 中出现此错误的原因是什么？答案

【问题标题】：What is the reason for this error in React Native?React Native 中出现此错误的原因是什么？
【发布时间】：2019-10-21 13:49:30
【问题描述】：

我是原生反应新手，我一直在尝试使用 createDrawerNavigator 创建标题和拉出菜单。

运行我的代码时出现以下错误。

错误：路由“Home”的组件必须是 React 组件。例如：

从'./MyScreen'导入我的屏幕；

主页：我的屏幕， }

您也可以使用导航器：

从'./MyNavigator'导入MyNavigator；

主页：我的导航器，

}

这是我的 app.js 文件：

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import MyDrawerNavigator from './components/MyDrawerNavigator';

  const MyApp = createAppContainer(MyDrawerNavigator);

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

我的 HomeScreen.js 文件

import React from 'react';
import { Text, Button } from 'react-native';
import LogoTitle from './LogoTitle';


class MyHomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
      return {
        headerTitle: <LogoTitle />,
        headerLeft: (
          <Button
          onPress={() => this.props.navigation.navigate('DrawerToggle')}
          title={'Menu'}
          />
        ),
      };
    };

    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
        </View>
      );
    }
  }

  export default MyHomeScreen;

我的 MyDrawerNavigator.js 文件

import React from 'react';
import { Button, Platform, Image, View, Text } from 'react-native';

import { createDrawerNavigator } from 'react-navigation-drawer';
import  MyHomeScreen  from './HomeScreen';
import  DetailsScreen  from './DetailScreen';


const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: MyHomeScreen,
    Details: DetailsScreen,
  }, {
   drawerPosition: 'right',
   contentOptions: {
   activeTintColor: '#000',
  },
});

export default MyDrawerNavigator

【问题讨论】：

你可能没有导出MyDrawerNavigator中的组件
我该怎么做？
导出默认 MyDrawerNavigator;
我这样做了，但仍然出现错误

标签： javascript reactjs react-native create-react-app

【解决方案1】：

这里有两个问题：

1) 您没有导出您的MyDrawerNavigator，只需添加：

export default MyDrawerNavigator

到您的MyDrawerNavigator.js 文件

2) 您没有导出您的HomeScreen。您必须为它创建一个单独的文件，就像您对 DetailsScreen 所做的那样。

HomeScreen.js 文件如下所示：

class MyHomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
      return {
        headerTitle: <LogoTitle />,
        headerLeft: (
          <Button
          onPress={() => this.props.navigation.navigate('DrawerToggle')}
          title={'Menu'}
          />
        ),
      };
    };

    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
        </View>
      );
    }
  }

您需要在屏幕内添加渲染

【讨论】：