2
votes

Comment réparer l'erreur "Vous avez probablement oublié d'exporter votre composant à partir du fichier..etc" dans React-Native?

J'importe le composant d'un autre fichier pour l'implémenter dans le fichier App.js, mais Unfornatuley obtient cette erreur: https: / /ibb.co/41ynFGX

Voici le code: https: (fichier header.js):

import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';

const App = () => (
    <View>

       <Header />

    </View>

);

export default App;

(App.js) code:

import React from 'react';
import { Text } from 'react-native';

const Header = () => <Text> Hello Ahmed </Text>;


export default Header;

Cela fonctionne bien ici ( https://snack.expo.io/@ahmed105/tenacious-coffee ), Mais j'obtiens l'erreur lors de l'exécution de l'application sur mon appareil à l'aide d'atome.

Toute aide sera appréciée.

javascript react-native expo

5 commentaires

Je ne vois aucun problème dans votre définition. Quelle est la version de réaction et de nœud que vous utilisez?

Fondamentalement, la définition de la fonction React Stateless est prise en charge sur React.14 et les versions ultérieures, toute version inférieure peut ne pas la prendre en charge.

@Rahul react-native-cli 2.0.1 et node: v11.13.0

Merci beaucoup, c'est le problème, tout s'est bien passé une fois que j'ai mis à jour la version de React.

Cool Happy Coding :)

4 Réponses :

1
votes

Hé, changez votre code pour qu'il fonctionne.

importer React depuis 'react'; importer {Text} depuis 'react-native';

export default Header = () => {
    return (
        <Text>
            Hello Ahmed
        </Text>
    );
};

1 commentaires

Vérifiez si correctement si vous essayez de l'importer à partir du bon emplacement. Votre structure de dossiers.

1
votes

L'erreur dit que:

Vérifiez la méthode de rendu de "App"

Alors essayez d'exporter App en tant que composant de classe et mettez votre code dans sa méthode de rendu:

App.js

import React, {Component} from 'react';
import { View } from 'react-native';
import Header from './components/header';

export default class App extends Component {
    render = () => {
        return (
            <View>
                <Header />
            </View>
        );
    }
}

1 commentaires

J'avais essayé mais le même problème existe toujours.

0
votes

L'erreur a été résolue Comme le problème n'était pas lié au code lui-même, le problème était lié à la version React. Comme @Rahul l'a dit: "Fondamentalement, la définition de la fonction React Stateless est prise en charge sur React.14 et supérieur, toute version inférieure peut ne pas la prendre en charge.

J'ai donc mis à jour React par cette commande: npm install react @ latest et tout va bien maintenant.

0 commentaires

0
votes

Vous pouvez obtenir cette erreur si vous utilisez MapView depuis expo. utilisez donc: react-native-maps

npm install react-native-maps --save-exact

yarn add react-native-maps -E

et, importez MapView de 'react-native-maps';

0 commentaires