22.03.01 navigation.navigate 타입 지정

내가 현재 있는 해당 메인 탭인 홈 스크린에서 navigation을 통해 다른 스크린으로 이동할 때

일일이 navigation을 props로 받지 않고 리액트 네이티브의 useNavigation을 사용하여 이동할 수 있다. 

 

1. 메인 탭은 어떤 것들이 있는지

2. 탭 안에서 다른 스크린들로 이동할 수 있는 스택은 어떤 것들이 있는지 

리스트와 타입을 지정해주어야 한다. 

 

만약 메인 탭이 홈 스크린에서 피드를 볼 수 있는 스크린으로 이동할 경우

최신순으로 정렬하겠다는 파라미터를 같이 넘겨주고 싶을 때,

다음과 같이 작성할 수 있다. 

navigation.navigate('Home', {
    screen: 'Feed', 
    params: { sort: 'latest' },
})

 

여기서 타입 지정을 해주려면 NavigatorScreenParams 를 지정해주면 된다. 

import { NavigatorScreenParams } from '@react-navigation/native'

type TabParamList = {
    Home: NavigatorScreenParams<StackParamList>
    Profile: { userId: string }
}

 

메인 탭 스크린에서 다른 스크린으로 스택 이동할 때 타입 지정은 다음과 같이 할 수 있다. 

import type { CompositScreenProps } from '@react-navigation/native'
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import type { StackScreenProps } from '@react-navigation/stack'

// 메인 탭 스크린 다음에 어디 스크린으로 갈거니? 걔는 타입이 어떻게 되니?
type ProfileScreenNavigationProp = CompositeScreenProps<
    BottomTabScreenProps<TabParamsList, 'Profile'>, 
    StackScreenProps<StackParamsList>
>

 

단순히 탭, 스택 네비게이션으로 끝나지 않고 밑에 Drawer 스크린도 있고 뭐가 진짜 많았다. 

일단 적용시킨 것만 정리 완료!

 

참고문서링크 

https://reactnavigation.org/docs/typescript/#nesting-navigators

https://reactnavigation.org/docs/typescript/#nesting-navigators