제목 재작성: 오류: 잘못된 요소 유형: 문자열(내장 구성 요소의 경우) 또는 클래스/함수(복합 구성 요소의 경우)가 필요하지만 요소 유형이 정의되지 않았습니다.

Question

React Native 코드에서 이 문제를 어떻게 해결할 수 있나요? 오류는 "오류: 잘못된 요소 유형: 예상 문자열(내장 구성 요소의 경우) 또는 클래스/함수(복합 구성 요소의 경우)이지만 정의되지 않았습니다. 정의된 파일에서 구성 요소를 내보내는 것을 잊었을 수 있습니다. 또는 기본 가져오기와 명명된 가져오기 사이에 혼동이 있을 수 있습니다. TopNavigation의 렌더링 방법을 확인하세요."

응용 프로그램과 컴퓨터를 다시 시작해 보았으나 이 오류가 사라지지 않았습니다. 이 문제를 해결하도록 도와줄 수 있는 사람이 있습니까?

내가 좋아하는 판매 방법:

'react-native'에서 { StyleSheet, View, Image } 가져오기
'반응'에서 반응을 가져옵니다
'../../assets/Logo.png'에서 로고 가져오기;
'../Styles/styles'에서 {icon1, logo2 }를 가져옵니다.
'반응 네이티브 벡터 아이콘'에서 { Ionicons }를 가져옵니다.
'반응 네이티브 벡터 아이콘'에서 { Entypo }를 가져옵니다.

기본 TopNavigation 내보내기 = ({ 탐색, 페이지 }) => {

    반품 (
        <보기 스타일={페이지 === '집' ? 스타일.컨테이너 : {
            flexDirection: '행',
            alignItems: '가운데',
            justifyContent: '공백',
            너비: '100%',
            padding세로: 10,
            위치: '절대',
            상단: 0,
            z인덱스: 100,
            배경색상: '검은색',
        }}>
            <엔타이포 이름="카메라" size={24} color="검은색" 스타일={icons1}
                onPress={() => Navigation.navigate('c')}
            />
            {
                페이지 === '집' ? <이미지 출처={로고} 스타일={로고2} /> :
                    <이미지 />
            }
         
            {
                페이지 === '프로필' &&
                <Ionicons name="설정-샤프"
                    크기={24}
                    색상="검은색"
                    스타일={styles.icons11}
                    onPress={() => Navigation.navigate('설정')}
                />
            }
        </보기>

    )
}

这是如何使用该组件的：

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

<코드>

내가 좋아하는 말:

"종속성": {
"@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",
"반응-네이티브-벡터-아이콘": "^9.2.0"
},

'react-native'에서 { StyleSheet, View, StatusBar } 가져오기;
import React, { useEffect, useState, useCallback } from 'react';
'../../Components/BottomNavigation'에서 BottomNavigation을 가져옵니다.
'../../Components/TopNavigation'에서 TopNavigation을 가져옵니다.

기본 기능 내보내기 Home({ 탐색 }) {

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


    AsyncStorage.getAllKeys()
        .then((키) => {
            keys.forEach((키) => {
                AsyncStorage.getItem(키)
                    .then((값) => {
                        console.log(`${key}: ${value}`);
                    })
                    .catch((오류) => {
                        console.log(`${key} 키에 대한 데이터 검색 오류: ${error}`);
                    });
            });
        })
        .catch((오류) => {
            console.log(`키 검색 오류: ${error}`);
        });

    반품 (
        <보기 스타일={styles.container}>
            <상태 표시줄 />
            <BottomNavigation 네비게이션={탐색} 페이지={'홈'} />
            <TopNavigation 네비게이션={탐색} 페이지={'홈'} />
        </보기>
    );
}

Answer 1

TopNavigation 컴포넌트의 코드에 문제가 있는 것 같습니다.

codesandbox에서 동일한 코드를 시도했는데 문제는 Entypo 구성 요소에 있는 것 같습니다.

Entypo 구성 요소의 사용을 제거하고 Entypo 대신 다른 해결 방법을 사용해 보세요.

아래 해결 방법을 시도해 보세요. 효과가 있기를 바랍니다.

예:

으아악