개발자
react-navigation navigate 파라미터 type
안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)
1RootStackParamList = {
2 Login: { page: string; data?: object } | undefined;
3 Foo: undefined;
4 Bar: undefined;
5};
6
7const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
8
9const onNavigate = (
10 page: keyof RootStackParamList,
11 params: RootStackParamList[keyof RootStackParamList] = undefined,
12) => {
13 navigation.navigate(page,params); // params 부분에서 에러 발생
14}
답변 1
navigation.navigate('page', { data: params }); 이런식으로 넘기면 됩니다
이진국
작성자
트루스트체인 프론트엔드 개발자 • 2024년 04월 22일
안녕하세요, 김지엽님. 답변 감사드립니다. 말씀주신 것처럼 수정한다면 본문에 작성되어 있는 RootStackParamList는 type RootStackParamList = { // Login: { data: { page: string } | undefined }; // Foo: { data: undefined }; // Bar: { data: { page: string } }; }; 위처럼 모두 수정되어야 하는 것일까요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 04월 19일
문제가 되는 부분은 `navigation.navigate` 함수의 파라미터로 전달되는 타입에 대한 문제입니다. 여기서 'navigate' 는 특정 화면으로 이동하는 기능을 가지고 있으며 이 때 넘겨주는 인자들을 잘 명시해 줘야 합니다. 즉, navigation 함수를 사용 할 때 각 페이지별로 필요한 params 을 정확하게 명시해줘야 하는데, 이 부분이 현재 코드에서 충족되지 않고 있습니다. `onNavigate` 함수에서 받는 `page` 변수의 값에 따라서 `params` 의 타입이 달라질 것 같은데, 아마도 그 부분을 해결하지 않아서 오류가 발생한 것 아닐까 추측됩니다. 아래와 같이 고치면 동적으로 `page` 값에 따른 `params` 의 타입을 정의해 줄수 있습니다: ```javascript RootStackParamList = { Login: { page: string; data?: object }; Foo: undefined; Bar: undefined; }; const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>(); type PageKey = keyof RootStackParamList; function onNavigate<T extends PageKey>( page: T, params?: RootStackParamList[T] ) { navigation.navigate(page, params); } ``` 이렇게 하면 `onNavigate('Login', { page: 'mypage', data: {} })` 와 같은 형태로 호출 할 수 있게 되며, 각 page 에 따른 params 의 타입 체크도 될 것 입니다. 이 방식으로는 원하시는 결과를 얻으실수 있을 것 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!