標題重寫為：錯誤：無效的元素類型：預期為字串（用於內建元件）或類別/函數（用於複合組件），但實際得到的是未定義的元素類型

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>

    )
}