Question

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

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

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

从“ ./MyScreen”导入MyScreen；

首页：MyScreen，   }

您还可以使用导航器：

从“ ./MyNavigator”导入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

Answer 1

这里有2个问题：

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

您需要在屏幕内添加渲染

React Native中此错误的原因是什么？

1 个答案: