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

Question

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

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

Error: The component for route 'Home' must be a React component. For example:

import MyScreen from './MyScreen';

Home: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator';

Home: 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

这里有两个问题:

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

export default MyDrawerNavigator

到您的MyDrawerNavigator.js文件

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

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

您需要在屏幕内添加渲染