Titre réécrit comme suit : Erreur : Type d'élément non valide : Chaîne attendue (pour les composants intégrés) ou classe/fonction (pour les composants composites) mais type d'élément non défini

Question

Comment puis-je résoudre ce problème dans mon code React Native ? L'erreur indique "Erreur : type d'élément non valide : chaîne attendue (pour les composants intégrés) ou classe/fonction (pour les composants composites), mais non définie. Vous avez peut-être oublié d'exporter le composant à partir du fichier dans lequel il a été défini, ou Il peut y avoir une confusion entre les importations par défaut et nommées. Veuillez vérifier la méthode de rendu de TopNavigation.”

J'ai essayé de redémarrer l'application et la machine mais cette erreur n'a pas disparu, quelqu'un peut-il m'aider à résoudre ce problème ?

这是我的导出方式：

importer { StyleSheet, View, Image } depuis 'react-native'
importer React depuis 'react'
importer le logo depuis '../../assets/Logo.png' ;
importer {icons1, logo2} depuis '../Styles/styles' ;
importer { Ionicons } depuis 'react-native-vector-icons' ;
importer { Entypo } depuis 'react-native-vector-icons' ;

exporter par défaut TopNavigation = ({ navigation, page }) => {

    retour (
        <View style={page === 'accueil' ? styles.container : {
            flexDirection : 'ligne',
            alignItems : 'centre',
            justifierContent: 'espace-entre',
            largeur : '100%',
            rembourrageVertical: 10,
            position : 'absolue',
            haut : 0,
            zIndice : 100,
            Couleur d'arrière-plan : "noir",
        }}>
            <Entypo name="caméra" taille = {24} couleur = "noir" style={icônes1}
                onPress={() => navigation.navigate('c')}
            />
            {
                page === 'accueil' ? <Source de l'image={logo} style={logo2} /> :
                    <Image />
            }
         
            {
                page === 'profil' &&
                <Ionicons name="settings-sharp"
                    taille={24}
                    couleur = "noir"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('paramètres')}
                />
            }
        </Afficher>

    )
}</pré>
<p>这是如何使用该组件的：</p>
<code>从 '../../Components/TopNavigation' et TopNavigation;</code></p>
<p><code> <TopNavigation navigation={navigation} page={'accueil'} /></code></p>
<p>我的依赖项：</p>
<pre class="brush:php;toolbar:false;">"dépendances" : {
"@react-native-async-storage/async-storage" : "^1.17.11",
"@react-native-community/geolocalisation" : "^3.0.5",
"@react-navigation/native": "^6.1.3",
"@react-navigation/native-stack": "^6.9.9",
"@shopify/flash-list": "^1.4.1",
"réagir": "18.2.0",
« réaction native » : « 0,71,2 »,
"react-native-gesture-handler" : "^2.9.0",
"contexte de zone de sécurité native de réaction" : "^4.5.0",
"écrans-natifs-de-réaction": "^3.19.0",
"icônes vectorielles réactives natives": "^9.2.0"
},</pré>
<pre class="brush:php;toolbar:false;">import { StyleSheet, View, StatusBar } depuis 'react-native';
importer React, { useEffect, useState, useCallback } depuis 'react' ;
importer BottomNavigation depuis '../../Components/BottomNavigation' ;
importer TopNavigation depuis '../../Components/TopNavigation' ;

fonction d'exportation par défaut Accueil({ navigation }) {

    const [userdata, setUserdata] = useState(null);


    AsyncStorage.getAllKeys()
        .then((touches) => {
            clés.forEach((clé) => {
                AsyncStorage.getItem (clé)
                    .then((valeur) => {
                        console.log(`${key} : ${value}`);
                    })
                    .catch((erreur) => {
                        console.log(`Erreur lors de la récupération des données pour la clé ${key} : ${error}`);
                    });
            });
        })
        .catch((erreur) => {
            console.log(`Erreur lors de la récupération des clés : ${error}`);
        });

    retour (
        <View style={styles.container}>
            <Barre d'état />
            <BottomNavigation navigation={navigation} page={'accueil'} />
            <TopNavigation navigation={navigation} page={'home'} />
        </Afficher>
    );
}

Answer 1

Je pense qu'il y a un problème dans le code du composant TopNavigation.

J'ai essayé le même code dans codesandbox et le problème semble provenir du composant Entypo.

Essayez de supprimer l'utilisation du composant Entypo et utilisez une autre solution de contournement à la place d'Entypo.

Essayez les solutions ci-dessous, j'espère qu'elles fonctionneront pour vous.

Par exemple :

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Logo.png';
import { icons1, logo2 } from '../Styles/styles';
import { Ionicons } from 'react-native-vector-icons';
import { Entypo } from 'react-native-vector-icons';

export default TopNavigation = ({ navigation, page }) => {

    return (
        <View style={page === 'home' ? styles.container : {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            paddingVertical: 10,
            position: 'absolute',
            top: 0,
            zIndex: 100,
            backgroundColor: 'black',
        }}>
            {
                page === 'home' ? <Image source={logo} style={logo2} /> :
                    <Image />
            }
         
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </View>

    )
}