时间戳

首页 > 解决方案 > React Native 中出现此错误的原因是什么？

javascript - React Native 中出现此错误的原因是什么？

问题描述

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

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

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

从'./MyScreen'导入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

标签： javascriptreactjsreact-nativecreate-react-app

解决方案

这里有两个问题：

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>
      );
    }
  }

您需要在屏幕内添加渲染

推荐阅读