标题重写为：错误：无效的元素类型：预期为字符串（用于内置组件）或类/函数（用于复合组件），但实际得到的是未定义的元素类型

Question

<p>如何在我的React Native代码中解决这个问题？错误显示为“错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件），但得到的是undefined。您可能忘记从定义它的文件中导出组件，或者可能混淆了默认导入和命名导入。请检查<code>TopNavigation</code>的渲染方法。”</p> <p>我尝试重新启动应用程序和机器，但这个错误没有消失，有人可以帮我解决这个问题吗？</p> <p>这是我的导出方式：</p> <pre class="brush:php;toolbar:false;">从 'react-native' 导入 { StyleSheet, View, Image } 从“反应”导入反应 从 '../../assets/Logo.png' 导入徽标； 从'../Styles/styles'导入{icons1，logo2}； 从 'react-native-vector-icons' 导入 { Ionicons } ； 从 'react-native-vector-icons' 导入 { Entypo } ； 导出默认 TopNavigation = ({ 导航, 页面 }) => { 返回 （ <查看样式={页面==='主页'？样式.容器：{ flexDirection: '行', 对齐项目：'居中'， justifyContent: '空间之间', 宽度：'100%'， 垂直填充：10， 位置：'绝对'， 顶部：0， z指数：100， 背景颜色：'黑色'， }}> <Entypo name=“相机”尺寸={24} 颜色=“黑色”风格={图标1} onPress={() =>;导航.navigate('c')} >> { 页面 === '主页' ? <图片来源={logo} 样式={logo2} /> : <图片/>> } { 页面 === '个人资料' && <离子名称=“设置-锐利” 尺寸={24} 颜色=“黑色” 样式={styles.icons11} onPress={() =>;导航.navigate('设置')} >> } </查看> ） }</pre> <p>这是如何使用该组件的：</p> 从 '../../Components/TopNavigation' 导入 TopNavigation;

<p><代码> “依赖项”: { “@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”， “反应”：“18.2.0”， “反应本机”：“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” },</预> <pre class="brush:php;toolbar:false;">从 'react-native' 导入 { StyleSheet, View, StatusBar }; 从 'react' 导入 React, { useEffect, useState, useCallback }; 从 '../../Components/BottomNavigation' 导入 BottomNavigation； 从 '../../Components/TopNavigation' 导入 TopNavigation； 导出默认函数Home({ navigation }) { const [userdata, setUserdata] = useState(null); AsyncStorage.getAllKeys() .then((键) => { 键.forEach((键) => { AsyncStorage.getItem(key) .then((值) => { console.log(`${key}: ${value}`); }) .catch((错误) => { console.log(`检索键 ${key} 的数据时出错：${error}`); }); }); }) .catch((错误) => { console.log(`检索密钥时出错：${error}`); }); 返回 （ <查看样式={styles.container}> <状态栏/> </查看> ）； }</pre></p>

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>

    )
}