标题重写为：错误：无效的元素类型：预期为字符串（用于内置组件）或类/函数（用于复合组件），但实际得到的是未定义的元素类型
P粉701491897
2023-09-01 13:23:24
<p>如何在我的React Native代码中解决这个问题？错误显示为“错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件），但得到的是undefined。您可能忘记从定义它的文件中导出组件，或者可能混淆了默认导入和命名导入。请检查<code>TopNavigation</code>的渲染方法。”</p>
<p>我尝试重新启动应用程序和机器，但这个错误没有消失，有人可以帮我解决这个问题吗？</p>
<p>这是我的导出方式：</p>
<pre class="brush:php;toolbar:false;">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>
)
}</pre>
<p>这是如何使用该组件的：</p>
<code>从 '../../Components/TopNavigation' 导入 TopNavigation;</code></p>
<p><code> <TopNavigation navigation={navigation} page={'home'} /></code></p>
<p>我的依赖项：</p>
<pre class="brush:php;toolbar:false;">"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"
},</pre>
<pre class="brush:php;toolbar:false;">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>
);
}</pre></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我认为在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> ) }