react-navigation에 TS 적용하기 (1)

라이브러리 설치

yarn add @react-navigation/native react-native-screens 
react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs

1. NativeStackNavigator

타입스크립트에서 네이티브 스택 네비게이터를 사용하기 위해서는 어떤 화면에 어떤 파라미터가 필요한지 정의하는 StackParamList 타입을 정의해줘야 한다. 이 Type을 사용하면 다른 화면을 띄울 때 화면의 이름과, Route Parameter를 검증할 수 있다.

타입 선언은 다음과 같이 선언하여 createNativeStackNavigator의 Generic으로 사용해준다.

type RootStackParamList = {
	Home : undefined;
    Detail : {
    	id : number ;
     };
   };
   
   const Stack = createNativeStackNavigator<RootStackParamList>();

위와 같이 createNativeStackNavigator의 제너릭으로 들어가는 타입은 interface가 아닌 type 예약자로 선언해주어야 한다.

2. useNavigation

useNavigation을 사용할 때에는 NavigationProp을 선언해 주어야 한다. 그리고 선언한 타입을 useNavigation에 Generic으로 설정해주어야 한다.
NativeStack에 사용되는 useNavigation 같은 경우에는 NativeStackNavigationProp을 불러와서 사용할 수 있다.

import {NativeStackNavigationProp} from '@react-navigation/native-stack';

type RootStackParamList = {
	Home : undefined;
    Detail : {
    	id : number ;
     };
   };
   
type RootStackNavigationProp = NativeStackNavigationProp<RootStackParamList>;

const navigation = useNavigation<RootStackNavigationProp>();

위와 같이 useNavigation의 Generic에 NativeStackNavigationProp을 사용한 타입 지정이 되어있지 않으면, push, pop 등의 함수를 사용할 수 없다.

3. useRoute

Stack.Screen의 component 프로퍼티에 쓰인 컴포넌트에서 useRoute를 사용해보자.
useRoute 훅을 Ts와 함께 사용하기 위해서는 위에서 useNavigation의 타입 지정을 하기 위해 특별한 Prop을 import 해온 것처럼 RouteProp을 import 해와야 한다.

import {RouteProp, useRoute} from '@react-navigation/native'

type RootStackParamList = {
   	Home : undefined;
       Detail : {
       	id : number ;
        };
      };
      
type DetailScreenRouteProp = RouteProp<RootStackParamList, 'Detail'>


function DetailScreen () {

	const {params} = useRoute<DetailScreenRouteProp>();
   
   return 
   		<View>
   			<Text>{params.id}</Text>
   		  </View>;