Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'. 에러
2885
投稿した質問数 1
(property) component: ScreenComponentType<ParamListBase, "Home">
React component to render for this screen.
Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'.
Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
Types of parameters '__0' and 'props' are incompatible.
Type '{}' is missing the following properties from type 'HomeScreenProps': navigation, routets(2322)
types.d.ts(327, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<ParamListBase, "Home", StackNavigationState<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap>'
git에 있는 코드를 복사해 붙여넣기 하였는데 이러한 에러가 나옵니다... 혹시 어떻게 하면 될까요?
回答 3
1
저도 @react-navigation/core@6.2.2 버전으로 변경 후에도 같은 에러가 발생해서
react navigation 공식문서를 읽어보았는데, 타입스크립트를 사용할때 타입 체크에 관한 부분에서
페이지 이동을 위해 경로 이름과 해당 경로에 필요한 매개변수들를 매핑하는 Object List를 정의하고
// line: 10
// Object List 정의
type RootStackParamList = {
Home: undefined;
Details: undefined;
};navigator에게 정의한 Object List를 사용하도록 알려줘야 한다고 합니다.
// line: 45
// Navigator에게 알려주기
const Stack = createNativeStackNavigator<RootStackParamList>();
git 코드에는 line: 45에 createNativeStackNavigator()에 <RootStackParamList>가 빠져서 추가해주시면 에러가 사라집니다!
아래 react navigation docs 링크 들어가셔서 바로 보이는 부분을 읽어보시면 해당 내용이 적혀있습니다.
https://reactnavigation.org/docs/typescript/#type-checking-the-navigator
1
@react-navigation/core@6.2.2 버전이어도 같은 에러라서 겉핧기지만 공부했습니다.
Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'.
navigation 의 요소는 ScreenComponentType에 맞지 않는다는 의미인것같고
강의 소스에서 navigation에 지정(?)된 타입은 NativeStackScreenProps 입니다.
NativeStackScreenProps을 tpyes.d.ts에서보면
NativeStackScreenProps 으로 지정된 타입안에서도 navigation이나 route는 세부 type으로
지칭되어야 하는것으로 보여집니다.
그래서 navigation 전환만 하는 페이지의 type 선언을 NativeStackScreenProps -> NativeStackNavigationProp으로 변경하고 RN navigation 공식문서의 Annotating useNavigation을 참고했더니 고쳐졌습니다.
https://reactnavigation.org/docs/typescript/#type-checking-screens
0
npm i @react-navigation/core@6.2.2 하시면 수정됩니다. 6.3.0 버전에 문제가 있는 듯 하네요.
0
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\SSAFY\FoodDeliveryApp\@react-navigation\core:/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\SSAFY\FoodDeliveryApp\@react-navigation\core:\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SSAFY\AppData\Local\npm-cache\_logs\2022-09-14T23_08_30_102Z-debug-0.log
제가 해결해보려고 했는데 알려주신 버전 설치가 잘 안되서 혹시 이건 무슨 문제가 있는 걸까요..?
0
packages, devDependencies, dependencies 등 패키지 명이라 생각했던 것을 넣고 했는데도 같은 오류가 나는데 제가 뭘 잘 못 알고 있는 걸까요?
그리고 같은 코드를 Android Studio로 켜보니 아무 에러가 나오지 않았습니다. 이건 왜 그런 걸까요..?
앱실행시 네이버맵 [401] 에러
0
954
2
스타일링 라이브러리
0
146
2
expo, cli 선택 중에 고민이 있습니다.
0
167
2
JDK 버전이 달라도 괜찮나요?
0
223
2
dimenstion usewindowdeminstion
0
120
3
[맥 전용]환경 설정하기 1편 & [맥 전용]환경 설정하기 2편의 영상이 안나옵니다.
0
209
1
jdk11 버전과 gradle 버전의 호환성 관련 질문드립니다.
0
398
2
강의 외 질문입니다!
0
157
2
react native랑 맞는 ui 라이브러리 어떤게 좋을까요?
0
1485
2
react native와 spring boot 연결
0
353
1
java가 아닌 .kt에서 code push 에러가 발생합니다.
0
210
2
flipper 239 에러가 발생합니다.
0
162
2
package.json에 /lib/panino.js 문제입니다.
0
464
2
window - mac 협업 과정 질문합니다
0
214
1
ios 빌드 중 RCTBridgeDelegate.h import 오류
0
289
2
ios 앱 빌드 중 hermesEnabled 관련 오류발생
0
238
2
Socket 연결시 질문 드립니다.!
0
151
2
wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.
0
425
2
iOS render error 질문드립니다.
0
410
2
iOS 가상머신 오류
0
164
2
npc react init 명령어 실행시 발생되는 오류
0
220
1
nom start 시 오류
0
116
1
NextJS 기반으로 만들어서 웹뷰 React Native로 배포 가능한가요?
0
994
2
안드로이드 rn75 버전에 맞게 설정 중에 android13 다운로드에 대해서 막혔습니다!
0
183
2