중첩 네비게이터 타입 설정하기 -1 ( CompositeNavigationProp )

Tags
부모 네비게이터에서 중첩 타입 선언 방법개별 스크린에서 사용할 타입 선언 방법CompositeScreenProps (v6)제네릭으로 타입 사용성 높히기CompositeNavigationPropnested screen prop 설정3중첩 이상 예시스크린에서 사용 예시nested navigation type 정의스크린에서 type 사용navigation, route 둘 다 정의하기 예시부모에서 자식의 구체적인 화면에 접근하기
 
 
 

부모 네비게이터에서 중첩 타입 선언 방법

// 중첩되어 삽입될 자식 네비게이터의 파람 리스트
export type BottomTabParamList = {
  Home: undefined;
  Profile: undefined;
  Settings: undefined;
};
// 부모 네비게이터 파람 리스트 타입 구성
export type RootStackParamList = {
  MainNav: NavigatorScreenParams<BottomTabParamList>; // <- 이렇게 해야함
  Feed: undefined;
};
 

개별 스크린에서 사용할 타입 선언 방법

CompositeScreenProps (v6)

navigation과 route에 대한 타입을 한번에 설정할 수 있는 helper가 v6 버전에서 추가됐다.
export type DispensingStackScreenProps = CompositeScreenProps<
  StackScreenProps<DispensingStackParamList, 'Dispensing'>, // 이 화면을 소유하고 있는 네비게이터에 대한 타입
  StackScreenProps<MainStackParamList> // 부모 네비게이터 타입
>;
notion image

제네릭으로 타입 사용성 높히기

// 화면 이름에 대해 제네릭으로 받아서 처리
export type DispensingStackScreenProps<T extends DispensingStackScreenNames> =
	CompositeScreenProps<
	  StackScreenProps<DispensingStackParamList, T>,
	  StackScreenProps<MainStackParamList>
	>;
// 실제 화면에서 사용하는 예시
const Screen({navigation, route}:DispensingStackScreenProps<'Dispensing'>) = () => {}

// navigation과 route 타입을 각각 뽑아서 쓰고 싶을 때는 인덱싱 해서 타입을 사용하면 됨
const {
  params: { selectedConditionList, preDispensingDate, isUsingProbStick },
} = useRoute<DispensingStackScreenProps<'Dispensing'>['route']>();

const { navigate } =
  useNavigation<DispensingStackScreenProps<'Dispensing'>['navigation']>();

CompositeNavigationProp

CompositeNavigationProp을 통해서 부모 네비게이터 타입과 엮어주면 됨.
예를들어 Stack 네비게이터 하위에 Tab 네비게이터가 있다고 가정하면 아래와 같이 타입을 설정할 수 있다.

nested screen prop 설정

CompositeNavigationProp type은 2개의 파라미터를 받는다.
  • primary 네비게이터 타입 ( 현재 화면을 소유하고 있는 네비게이터에 대한 타입 )
      • 현재의 경우에는 Profile 화면을 포함하고 있는 네비게이터에 대한 타입을 말함.
      두번째 파라미터로 항상 현재 화면의 이름을 전달해야함.
  • secondary 네비게이터 타입 ( 부모 네비게이터에 대한 타입 )
💡
스크린 안에 또 네비게이션을 가지고 있는 경우, 해당 화면은 자신의 네비게이터에 대한 프롭과, 자식 네비게이터에 대한 프롭을 모두 가진다
import { CompositeNavigationProp } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { StackNavigationProp } from '@react-navigation/stack';

type ProfileScreenNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'Profile'>, // 이 화면을 소유하고 있는 네비게이터에 대한 타입
  StackNavigationProp<StackParamList> // 부모 네비게이터 타입
>;
자식 네비게이터 입장에서 타입 정의

3중첩 이상 예시

CompositeNavigationProp을 여러번 중첩시키면 된다.
아래 예시는 Drawer(상위) → Stack → Tab(하위) 순으로 nested 된 경우에 대한 예시다.
type ProfileScreenNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'Profile'>,
  CompositeNavigationProp<
    StackNavigationProp<StackParamList>,
    DrawerNavigationProp<DrawerParamList>
  >
>;
 

스크린에서 사용 예시

nested navigation type 정의

export type AssignTabProcessProps = {
  navigation: CompositeNavigationProp<
    StackNavigationProp<RootAssignTabParamList, 'TabProcess'>, // 이 화면을 소유하고 있는 네비게이터에 대한 타입
    StackNavigationProp<RootAssignStackParamList> // 부모 네비게이터 타입
  >;
};

스크린에서 type 사용

export default function TabProcess({ navigation }: AssignTabProcessProps) {
 ...
}
 

navigation, route 둘 다 정의하기 예시

import {CompositeNavigationProp, RouteProp} from '@react-navigation/native';
import {
  BottomTabScreenProps,
  BottomTabNavigationProp,
} from '@react-navigation/bottom-tabs';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStack} from '@navigators/Stack/types';
export type RootBottomTab = {
  Search: undefined;
  Clip: undefined;
};

export type SearchProps = {
  navigation: CompositeNavigationProp<
    BottomTabNavigationProp<RootBottomTab, 'Search'>,
    StackNavigationProp<RootStack>
  >;
  route: RouteProp<RootBottomTab, 'Search'>;
};

export type ClipProps = {
  navigation: CompositeNavigationProp<
    BottomTabNavigationProp<RootBottomTab, 'Clip'>,
    StackNavigationProp<RootStack>
  >;
  route: RouteProp<RootBottomTab, 'Clip'>;
};

부모에서 자식의 구체적인 화면에 접근하기

  • params까지 필요한 겨우 예시
const startPreDispensing = useCallback(
    (selectedDate: string) => {
      navigate('DispensingStack', {
        screen: 'Dispensing',
        params: {
          selectedConditionList: {},
          preDispensingDate: selectedDate,
          isUsingProbStick,
        },
      });
    },
    [isUsingProbStick, navigate],
  );