이 컴포넌트에서는 일단 임시로 텍스트만 띄우도록 설정했습니다.

12장의 타입스크립트 환경에서는 각 내비게이터 컴포넌트 파일 내에서 리액트 내비게이션을 위한 타입을 선언했지요? 여기서도 똑같이 해도 상관없지만 각 컴포넌트 파일에 선언하게 되면 파일을 여러 번 왔다 갔다 해야 합니다. 특히 일부 타입은 상호 참조하기 때문에 헷갈릴 수 있습니다. 따라서 이 작업을 조금 더 편하게 하기 위해 screens 디렉터리에 types.ts 파일을 생성하고 그 파일에서 리액트 내비게이션에 관련한 타입들을 선언해주겠습니다.

screens/types.ts

import {BottomTabNavigationProp} from '@react-navigation/bottom-tabs';
import {
  CompositeNavigationProp,
  NavigatorScreenParams,
  RouteProp,
} from '@react-navigation/core';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';

/* MainTab */
export type MainTabParamList = {
  Articles: undefined;
};
export type MainTabNavigationScreenParams = NavigatorScreenParams<MainTabParamList>;
export type MainTabNavigationProp = CompositeNavigationProp<
  RootStackNavigationProp,
  BottomTabNavigationProp<MainTabParamList>
>;
export type MainTabRouteProp = RouteProp<RootStackParamList, 'MainTab'>;

/* RootStack */
export type RootStackParamList = {
  MainTab: MainTabNavigationScreenParams;
};
export type RootStackNavigationProp = NativeStackNavigationProp<RootStackParamList>;