Tajuk ditulis semula kepada: Ralat: Jenis elemen tidak sah: Rentetan yang dijangkakan (untuk komponen terbina dalam) atau kelas/fungsi (untuk komponen komposit) tetapi mendapat jenis elemen yang tidak ditentukan

Question

Bagaimanakah saya boleh menyelesaikan masalah ini dalam kod React Native saya? Ralat berbunyi "Ralat: Jenis elemen tidak sah: rentetan jangkaan (untuk komponen terbina dalam) atau kelas/fungsi (untuk komponen komposit), tetapi tidak dapat ditentukan. Anda mungkin terlupa untuk mengeksport komponen daripada fail di mana ia ditakrifkan, atau Mungkin terdapat kekeliruan antara import lalai dan dinamakan Sila semak kaedah pemaparan TopNavigation.”

Saya cuba memulakan semula aplikasi dan mesin tetapi ralat ini tidak hilang, bolehkah sesiapa membantu saya membetulkannya?

这是我的导出方式：

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

eksport lalai TopNavigation = ({ navigasi, halaman }) => {

    kembali (
        <Lihat gaya={halaman === 'rumah' ? styles.container : {
            flexDirection: 'baris',
            alignItems: 'pusat',
            justifyContent: 'ruang-antara',
            lebar: '100%',
            pelapikMenegak: 10,
            kedudukan: 'mutlak',
            atas: 0,
            zIndex: 100,
            Warna latar belakang: 'hitam',
        }}>
            <Entypo name="kamera" saiz={24} warna="hitam" gaya={ikon1}
                onPress={() => navigation.navigate('c')}
            />
            {
                halaman === 'rumah' ? <Sumber imej={logo} style={logo2} /> :
                    <Imej />
            }
         
            {
                halaman === 'profil' &&
                <Ionicons name="tetapan-tajam"
                    saiz={24}
                    warna="hitam"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </Lihat>

    )
}

这是如何使用该组件的：

从 '../../Components/TopNavigation' 导入 TopNavigation;

我的依赖项：

"dependencies": {
"@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",
"bertindak balas": "18.2.0",
"react-asli": "0.71.2",
"pengendali-isyarat-bertindak balas": "^2.9.0",
"konteks-kawasan-selamat-asli-bertindak": "^4.5.0",
"skrin asli bertindak balas": "^3.19.0",
"ikon-vektor-react-native": "^9.2.0"
},</pra>
<pre class="brush:php;toolbar:false;">import { StyleSheet, View, StatusBar } daripada 'react-native';
import React, { useEffect, useState, useCallback } daripada 'react';
import BottomNavigation daripada '../../Components/BottomNavigation';
import TopNavigation daripada '../../Components/TopNavigation';

eksport fungsi lalai Laman Utama({ navigasi }) {

    const [data pengguna, setUserdata] = useState(null);


    AsyncStorage.getAllKeys()
        .then((keys) => {
            keys.forEach((key) => {
                AsyncStorage.getItem(key)
                    .then((nilai) => {
                        console.log(`${key}: ${value}`);
                    })
                    .catch((error) => {
                        console.log(`Ralat mengambil data untuk kunci ${key}: ${error}`);
                    });
            });
        })
        .catch((error) => {
            console.log(`Ralat mengambil kunci: ${error}`);
        });

    kembali (
        <Lihat gaya={styles.container}>
            <Bar Status />
            <BottomNavigation navigation={navigation} page={'home'} />
            <TopNavigation navigation={navigation} page={'home'} />
        </Lihat>
    );
}

Answer 1

Saya rasa terdapat masalah dalam kod komponen TopNavigation.

Saya mencuba kod yang sama dalam codesandbox dan masalahnya nampaknya adalah dengan komponen Entypo.

Cuba alih keluar penggunaan komponen Entypo dan gunakan penyelesaian lain dan bukannya Entypo.

Cuba penyelesaian di bawah, harap ia berkesan untuk anda.

Contohnya:

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>

    )
}