• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    해결됨

Ing component navigation type error

22.11.20 16:02 작성 조회수 182

0

Ing 컴포넌트의 네비게이션 타입을 강좌에 나온대로 진행하였더니 타입에러가 발생해서 문의글 남깁니다.

컴포넌트 하단부 도착 마커의 navigation.push("Complete", {}); 에서 push 관련된 타입에러가 발생하였습니다.

Property 'push' does not exist on type 'NavigationProp

라는 에러메세지가 발생하였는데요.

우선 아래의 사진과 같이 navigation의 타입을 재선언 해주면서 해결이 되었습니다.

LoggedInParamList 대신에 생성한 IngScreenPorps를 넣어봤으면 push에 대한 에러는 해결되지만 complete라는 네비게이션을 찾지 못한다는 에러가 발생하여 위와같이 해결했는데 옳바른 해결책인지 궁금해서 문의 드립니다!

 

그리고 추가로console.dir 을 활용하려고 하면

TS2339: Property 'dir' does not exist on type 'Console'.

위와 같은 에러가 발생하는데 이건 해결책이 없을까요? 혼자 찾아보려고 했으나 찾지를 못하여 문의드립니다.

답변 1

답변을 작성해보세요.

0

NativeStackScreenProps를 NativeStackNavigationProp로 바꾸신 것인데 버전차이같기도 합니다. 제 강좌 버전에서는 문제 없었습니다.

애초에 navigation이 NativeStackNavigationProp이라 push가 없을 리가 없습니다.

export type NativeStackScreenProps<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string,
  NavigatorID extends string | undefined = undefined
> = {
  navigation: NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
  route: RouteProp<ParamList, RouteName>;
};

console.dir는 @types/node를 설치하면 될 것 같습니다.

김영욱님의 프로필

김영욱

질문자

2022.11.20

답변 감사합니다!


우선 제가 잘못된 정보를 드려 죄송합니다 ㅠ

보니까 navigation을 구조분해를 안해서 push에 에러가 생기는거였습니다.

 

그외에 다른 이슈가 있는데
1. node types 디펜던시를 추가해도 console.dir에 관련된 에러가 동일하게 계속 발생하는데 이런경우 포기하는 수 밖에 없을까요?
2. Ing 컴포넌트를 호출하는 호출부의 component 부부에서 에러가 발생하는데 해결책을 못찾겠습니다.
TS2322: Type '({ navigation }: IngScreenProps) => JSX.Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Ing"> | undefined'.   Type '({ navigation }: IngScreenProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.     Types of parameters '__0' and 'props' are incompatible.       Type '{}' is missing the following properties from type 'IngScreenProps': navigation, route

혹시 좋은 해결책이 없을까요?

console.log를 먼저 적으시고 log에서 타입 정의로 이동할 때 어떤 파일로 이동하나요?

아래 에러는 https://www.inflearn.com/questions/651242 여기에 임홍진님 댓글에 따라서 useNavigation으로 변경해서 수정하시면 됩니다.

김영욱님의 프로필

김영욱

질문자

2022.11.20

image위와같이 react-native의 index로 갑니다!
dir을 쓰고 찍어보면
image
위와같이 dir이 있는곳으로 가기는 하지만 에러메세지는 계속 나오구요

아래 방법은 시도해보겠습니다!