Titel umgeschrieben in: Fehler: Ungültiger Elementtyp: Zeichenfolge (für integrierte Komponenten) oder Klasse/Funktion (für zusammengesetzte Komponenten) erwartet, aber undefinierter Elementtyp erhalten

Question

Wie kann ich dieses Problem in meinem React Native-Code lösen? Der Fehler lautet „Fehler: Ungültiger Elementtyp: erwartete Zeichenfolge (für integrierte Komponenten) oder Klasse/Funktion (für zusammengesetzte Komponenten), wurde jedoch nicht definiert. Möglicherweise haben Sie vergessen, die Komponente aus der Datei zu exportieren, in der sie definiert wurde. oder Es besteht möglicherweise eine Verwechslung zwischen Standard- und benannten Importen. Bitte überprüfen Sie die Rendering-Methode von TopNavigation.”

Ich habe versucht, die Anwendung und den Computer neu zu starten, aber dieser Fehler ist nicht verschwunden. Kann mir jemand helfen, das Problem zu beheben?

这是我的导出方式:

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

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

    zurückkehren (
        <View style={page === 'home' ? Styles.Container: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            Breite: '100%',
            paddingVertical: 10,
            Position: 'absolut',
            oben: 0,
            zIndex: 100,
            Hintergrundfarbe: 'schwarz',
        }}>
            <Entypo name="Kamera" Größe={24} Farbe="schwarz" style={icons1}
                onPress={() => navigation.navigate('c')}
            />
            {
                page === 'home' ? <Image source={logo} style={logo2} /> :
                    <Bild />
            }
         
            {
                Seite === 'Profil' &&
                <Ionicons name="settings-sharp"
                    Größe={24}
                    Farbe="schwarz"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </Anzeigen>

    )
}

这是如何使用该组件的：

从 '../../Components/TopNavigation' für TopNavigation;

我的依赖项:

"Abhängigkeiten": {
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-community/geolocation": "^3.0.5",
"@react-navigation/native": "^6.1.3",
"@react-navigation/native-stack": "^6.9.9",
"@shopify/flash-list": "^1.4.1",
"reagieren": "18.2.0",
„react-native“: „0.71.2“,
"react-native-gesture-handler": "^2.9.0",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.19.0",
"react-native-vector-icons": "^9.2.0"
},

import { StyleSheet, View, StatusBar } from 'react-native';
import React, { useEffect, useState, useCallback } from 'react';
BottomNavigation aus '../../Components/BottomNavigation' importieren;
TopNavigation aus '../../Components/TopNavigation' importieren;

Standardfunktion exportieren Home({ navigation }) {

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


    AsyncStorage.getAllKeys()
        .then((keys) => {
            keys.forEach((key) => {
                AsyncStorage.getItem(key)
                    .then((Wert) => {
                        console.log(`${key}: ${value}`);
                    })
                    .catch((error) => {
                        console.log(`Fehler beim Abrufen der Daten für Schlüssel ${key}: ${error}`);
                    });
            });
        })
        .catch((error) => {
            console.log(`Fehler beim Abrufen der Schlüssel: ${error}`);
        });

    zurückkehren (
        <View style={styles.container}>
            <StatusBar />
            <BottomNavigation navigation={navigation} page={'home'} />
            <TopNavigation navigation={navigation} page={'home'} />
        </Anzeigen>
    );
}

Answer 1

我认为在TopNavigation组件的代码中存在问题。

我在codesandbox中尝试了相同的代码，问题似乎与Entypo组件有关。

尝试删除Entypo组件的使用，并使用另一种解决方法代替Entypo。

尝试下面的解决方案，希望对你有用。

例如：

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>

    )
}