В чем причина этой ошибки в React Native?

Question

Я новичок, чтобы реагировать на родную систему, и я пытался создать заголовок и вытащить меню, используя createDrawerNavigator.

При запуске моего кода я получаю следующую ошибку.

Ошибка: компонент для маршрута «Домой» должен быть компонентом React. Например:

импорт MyScreen из './MyScreen' ;

Home: MyScreen,}

Вы также можете использовать навигатор:

import MyNavigatorfrom './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 />;
    }
  }

Файл My 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>
      );
    }
  }

Вы ДОЛЖНЫ добавить рендервнутри ваших экранов