react-navigation에 Ts 적용하기 (2)

지난 포스팅에서는 createNativeStackNavigator, useNavigation에 Typescript를 적용하는 방법에 대해 포스팅했었는데, 이번에는 그 이후에 대해서 알아보자 !

🪴 스택 네비게이터 내부에 하단 탭 네비게이터 넣기

우선 탭 네비게이터를 위한 Type 세팅을 해주어야 한다.

type MainTabParamList = {
	Home : undefined;
    Account : undefined;
 }; // 하단 탭이 포함하는 컴포넌트들의 route parameter들의 type 지정

import {BottomTabNavigationProp} from '@react-navigation/bottom-tabs';
type MainTabNavigationProp = BottomTabNavigationProp<MainTabParamList>;
// useNavigation을 위한 세팅

const Tab = createBottomTabNavigator<MainTabParamList>();

만약 네이티브 스택 네비게이터 없이 bottom tab navigator로만 충분하다면, 위와 같이 작성하여도 문제가 없지만, 하단 탭 네비게이터에서 그 상위에 있는 RootStack의 컴포넌트에 접근하려면 NavigationProps들을 합쳐주어야 한다.