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

Question

I am new to react native and I have been trying to create a header and pull out menu using createDrawerNavigator.

When running my code I get the following error.

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,

}

Here is my app.js file:

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

My HomeScreen.js file

 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;

My MyDrawerNavigator.js file

 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

The are 2 problems here:

1) You are not exporting your MyDrawerNavigator just add:

export default MyDrawerNavigator

to your MyDrawerNavigator.js file

2) You are not exporting your HomeScreen . You'll have to create a separate file for it, like you did with DetailsScreen .

The HomeScreen.js file would look like:

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

You NEED to add a render inside of your screens