如何在我的React Native代码中解决这个问题？错误显示为“错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件），但得到的是undefined。您可能忘记从定义它的文件中导出组件，或者可能混淆了默认导入和命名导入。请检查TopNavigation的渲染方法。”

我尝试重新启动应用程序和机器，但这个错误没有消失，有人可以帮我解决这个问题吗？

这是我的导出方式：

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',
        }}>
            <Entypo name="camera" size={24} color="black" style={icons1}
                onPress={() => navigation.navigate('c')}
            />
            {
                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>

    )
}

这是如何使用该组件的：

我的依赖项：

"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",
"react": "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';
import BottomNavigation from '../../Components/BottomNavigation';
import TopNavigation from '../../Components/TopNavigation';

export default function Home({ navigation }) {

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


    AsyncStorage.getAllKeys()
        .then((keys) => {
            keys.forEach((key) => {
                AsyncStorage.getItem(key)
                    .then((value) => {
                        console.log(`${key}: ${value}`);
                    })
                    .catch((error) => {
                        console.log(`Error retrieving data for key ${key}: ${error}`);
                    });
            });
        })
        .catch((error) => {
            console.log(`Error retrieving keys: ${error}`);
        });

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