TIL: RN, TS | ReactNavigation Type checking (4) Annotating options and screenOptions, Ref - 220915

Annotation options and screenOptions

options을 화면에 전달하거나 Navigator component에 screenOptions prop을 전달할 때, 이미 type이 확인되어있기 때문에 특별히 따로 작업을 할 필요는 없다
원한다면 옵션을 별도의 객체로 추출하고 annotate 할 수 있다

options에 annotate를 하려면 navigator에서 해당 type을 가져와야 한다
ex) @react-navigation/stack에 대한 StackNavigationOptions

import type { StackNavigationOptions } from '@react-navigation/stack'

const options: StackNavigationOptions = {
  headerShown: false,
}

마찬가지로
DrawerNavigationOptions는 @react-navigation/drwer 에서
BottomTabNavigationOpions는 @react-navigation/bottom-tabs 에서 가져온다

options와 screenOptions의 함수를 사용하는 경우
navigation과 route props에서 사용한 동일한 type을 arguments에 달 수 있다

Annotating ref on NavigationContainer

createNavigationContainerRef() 메소드로 ref를 작성하는 경우, 다음과 같이 ref에 annotate를 달아 navigation type 검사를 할 수 있다

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

// ...

const navigationRef = createNavigationContainerRef<RootStackParamList>();

useNavigationContainerRef()도 같은 방법으로 할 수 있다

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

// ...

const navigationRef = useNavigationContainerRef<RootStackParamList>();

일반 ref 객체를 사용하는 경우에는 다음과 같이 NavigationContainerRef 유형에 제네릭을 전달 할 수 있다

import type { NavigationContainerRef } from '@react-navigation/native';

// ...

const navigationRef =
  React.useRef<NavigationContainerRef<RootStackParamList>>(null);

createRef 를 사용하는 예

import type { NavigationContainerRef } from '@react-navigation/native';

// ...

const navigationRef =
  React.createRef<NavigationContainerRef<RootStackParamList>>();

https://reactnavigation.org/docs/typescript/#specifying-default-types-for-usenavigation-link-ref-etc