web-dev-qa-db-fra.com

Correction d'erreur: le composant de l'itinéraire 'Home' doit être un composant React

J'essaie d'utiliser React-Navigation mais je n'arrive pas à le faire fonctionner lorsque je déplace les composants de chaque écran dans plusieurs fichiers. J'obtiens toujours cette erreur: "Le composant de la route 'Home' doit être un composant React". Cette erreur ne se produit pas si je déplace tout le code dans un fichier, donc je ' Je ne sais pas quelle est la différence.

Voici mon App.js:

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';

import { HomeScreen } from './screens/HomeScreen';
import { JoinScreen  from './screens/JoinScreen';
import { HostScreen } from './screens/HostScreen';


const Root = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: JoinScreen,
    }
  }, 
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Root />
    )
  }
}

Et voici mes .screens/HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello World</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  }
});
javascriptreact-nativereact-navigation
9
B Roy Dawson

Je pense que si vous changez cette ligne:

import { HomeScreen } from './screens/HomeScreen';

à:

import HomeScreen from './screens/HomeScreen';

(c'est-à-dire en supprimant les accolades autour de HomeScreen), cela fonctionnera. Parce que vous avez utilisé export default dans le fichier source du composant HomeScreen, vous n'avez pas besoin de destructuring sur le import. Cela tente d'accéder à une variable appelée HomeScreen sur le composant, qui se résout en undefined et provoque l'erreur que vous avez vue.

Vous pouvez également supprimer le default de export default et conservez le import le même. Personnellement, je préfère supprimer les accolades car le code semble plus propre.

Il y a aussi une accolade de fermeture manquante sur cette ligne:

import { JoinScreen  from './screens/JoinScreen';

Mais j'ai supposé que c'était une faute de frappe;)

12
Matt Holland

Je pense que réagir a un problème pour savoir quoi importer
Puisque vous exportez une chose par défaut, vous devez remplacer

importer {HomeScreen} à partir de './screens/HomeScreen';
importer HomeScreen depuis './screens/HomeScreen';
1
Haythem Farhat

Gardez les accolades intactes pour vos importations de fichiers d'écran externes. Faites simplement ce qui suit et il devrait fonctionner sur les deux Android et simulateurs iOS indépendamment

// HomeScreen.js
... all imports
export class HomeScreen extends React.Component {
...

Cela a résolu le problème pour moi sur les deux plates-formes.

0
Vijay Kumar Kanta

Ajoutez ceci à votre fichier js en bas ajoutez cette ligne

export default MainActivity;


import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation-stack';

class MainActivity extends Component{
  ...
}
export default MainActivity;
0
Keshav Gera

Cela se produit également si vous n'exportez pas votre classe.

export default class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}
0
chandresh