inflearn logo
강의

Course
Instructor

[Renewal] Building a Restaurant Map App (React Native & NestJS)

6강 강의 듣는 중 FeedHomeHeaderLeft(navigation) 의 navigation 파라미터 넘기는 부분 에러발생

Resolved

125

sevenfingersstudio

5 asked

0

❗질문 작성시 꼭 참고해주세요

다음의 코드에서

   <Stack.Screen
        name={feedNavigations.FEED_HOME}
        component={FeedHomeScreen}
        options={({navigation}) => ({
          headerTitle: '피드',
          headerLeft: () => FeedHomeHeaderLeft(navigation),
        })}
      />

 

FeedHomeHeaderLeft(navigation)

부분에 navigation이 에러가 나는데

에러는 다음과 같습니다.

Argument of type 'StackNavigationProp<FeedStackParamList, "FeedHome", undefined>' is not assignable to parameter of type 'FeedHomeHeaderLeftProps'.
Type 'Omit<NavigationHelpersCommon<FeedStackParamList, StackNavigationState<FeedStackParamList>>, "getParent"> & { ...; } & EventConsumer<...> & PrivateValueStore<...> & StackActionHelpers<...>' is missing the following properties from type 'Omit<Omit<NavigationHelpersCommon<FeedStackParamList, StackNavigationState<FeedStackParamList>>, "getParent"> & ... 9 more ... & { ...; }, "getParent" | ... 13 more ... | keyof EventConsumer<...>>': jumpTo, openDrawer, closeDrawer, toggleDrawerts(2345)

(parameter) navigation: StackNavigationProp<FeedStackParamList, "FeedHome", undefined>

 

FeedHomeHeaderLeft.tsx 에서

 

type FeedHomeHeaderLeftProps = CompositeNavigationProp<
  StackNavigationProp<FeedStackParamList>,
  DrawerNavigationProp<MainDrawerParamList>
>;

function FeedHomeHeaderLeft(navigation: FeedHomeHeaderLeftProps) {
  return (
    <HeaderButton
      icon={<Ionicons name="menu" color={colors.BLACK} size={25} />}
      onPress={() => navigation.openDrawer()}
    />
  );
}

 

요렇게 되어있는데 넘겨받는 파라미터랑 넘겨주는 쪽이 맞지않아서... 그런거 같은데..

 

강의 6강 듣고있는 중이구요... 도저히 해결이 안되서 질문드립니다.

 

무엇이 잘못된걸까요?? 선생님 github 소스내려받아도 저는 navigation 저부분이 계속 빨간줄 쳐지면서 에러가 발생합니다..

 

새해 복 많이 받으세요.

react-native typescript nestjs react-query zustand

Answer 3

0

sevenfingersstudio

아.. 강의에서는 항상 최신버전으로 설치하는 방식으로 알려주다보니.. 저처럼 지금 듣는 수강생들은

중간중간에도 버전맞춘다고... 고생을 했는데 이번에도 버전 문제였네요

기존에는 밑에것들이 전부다 7버전이었는데 다음과 같이 6버전으로 바꾸니 정상동작 합니다.

강의때도 일반적은 설치방식보다 버전을 fix해서 하는 방식을 알려주셨으면 조금더 나중에 듣는 수강생들도 좋지 않을까 생각됩니다.

yarn add @react-navigation/native@6

yarn add @react-navigation/drawer@6

yarn add @react-navigation/stack@6

 

0

sevenfingersstudio

AI 답변으로는 해결이 되지 않습니다. 구글링이며.. ChatGPT며.. 어떤 원인을 말하는지는 알겠는데..

기반지식 부족때문일까요...

선생님 코드와 동일한데.. 선생님은 왜.. 에러없이 넘어갔는지.. 궁금하네요.. 전계속 에러가 발생해서 넘어가지를 못하고있습니다.

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. sevenfingersstudio님.

질문하신 내용을 바탕으로, FeedHomeHeaderLeft의 navigation 파라미터와 타입 불일치 문제를 해결하기 위해 몇 가지 확인해야 할 사항이 있습니다.

문제의 원인

현재 문제는 CompositeNavigationProp를 활용해서 두 개의 네비게이터 타입을 결합하여 사용하는데, 타입이 맞지 않아서 발생하는 것으로 보입니다. FeedHomeHeaderLeft에서 기대하는 CompositeNavigationProp 타입과 실제 전달되는 StackNavigationProp 타입이 맞지 않는 것이 원인입니다.

해결 방법

  1. Navigation 타입 확인 및 수정:

    • Navigation 타입을 명확히 맞춰 주시기 바랍니다. FeedHomeHeaderLeft에서는 CompositeNavigationProp를 타입으로 받고 있으므로 이와 맞추도록 수정해야 합니다.
    • options에서 전달되는 navigation은 StackNavigationProp 입니다. FeedHomeHeaderLeft에서 받을 때는 CompositeNavigationProp로 받도록 설정해야 합니다.

  2. 타입스크립트 에러 해결:

    • navigation 인자의 타입을 FeedHomeHeaderLeft에서 기대하는 타입으로 적절하게 수정하십시오.
    • 혹은 사용하기로 기대한 타입이 잘못되었다면 상대적인 코드를 StackNavigationProp 에 맞추어 변경해야 할 수도 있습니다.

다음은 코드를 예시로 수정하는 방법입니다:

type CompositeNavigationProps = CompositeNavigationProp<
  StackNavigationProp<FeedStackParamList, 'FeedHome'>,
  DrawerNavigationProp<MainDrawerParamList>
>;

function FeedHomeHeaderLeft(navigation: CompositeNavigationProps) {
  return (
    <HeaderButton
      icon={<Ionicons name="menu" color={colors.BLACK} size={25} />}
      onPress={() => navigation.openDrawer()}
    />
  );
}

이렇게 변경하면 FeedHomeHeaderLeft가 제대로 된 CompositeNavigationProp의 타입을 받을 수 있습니다.

관련 질문 URL

관련 문제에 대한 다른 유사한 질문들을 참조하면 추가적인 도움을 받을 수 있습니다:

문제가 해결되지 않거나 추가적인 설명이 필요하시면, 질문을 조금 더 구체적으로 올려주시면 좋겠습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

react-native-screens 버전 호환 문제

2

154

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

104

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

83

1

강의 수강 순서 관련

0

71

1

애뮬레이터 실행 방법

0

100

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

72

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2