복잡한 화면구성에 navigation하는 일은 쉽지만은 않다..

Stack.Navigator (Main)

• HomeTab

  • MyPageStack
    • MyPage
    • MyCoupon
  • CampaignStack
    • Campaign

  GamePlay

  • Ranking

• MakeCampaginStack

  • MakeCampagin
  • MakePinPoint
  • MakeCoupon

• Game

• ModalStack

@types

type MainStackParamList = {
    HomeTab: {
      screen?: keyof CampaginStackParamList,
    },
    MakeCampaginStack: {
      screen?: keyof MakeCampaginStackParamList,
      params: CampaginParams
    },
    Game: undefined,
    ModalStack: {
      screen: keyof ModalStackParamList
    }
  };

  type HomeTabParamList = {
    MyPageStack: undefined,
    CampaignStack: undefined,
    GamePlay: undefined,
    Ranking: undefined,
  };
  type MyPageStackParamList = {
    MyPage: undefined,
    MyCoupon: undefined,
  };
  type CampaginStackParamList = {
    CampaginStack: undefined,
  };

  type MakeCampaginStackParamList = {
    MakeCampagin: CampaginParams,
    MakePinPoint: CampaginParams,
    MakeCoupon: CampaginParams,
  };
  type CampaginParams = {
    pinpoint?: PinPoint,
    coupon?: Coupon,
    editIndex?: number
  }

  type ModalStackParamList = {
    MyCoupon: undefined,
  };

useNavigation.ts

import { NavigationProp, useNavigation } from "@react-navigation/core";
import { CampaginStackParamList, MainStackParamList, MakeCampaginStackParamList, ModalStackParamList, MyPageStackParamList } from "@types";

const mainNavigation = () => {
    return useNavigation<NavigationProp<MainStackParamList>>();
}
const campaginNavigation = () => {
    return useNavigation<NavigationProp<CampaginStackParamList>>();
}
const makeCampaginNavigation = () => {
    return useNavigation<NavigationProp<MakeCampaginStackParamList>>();
}
const myPageNavigation = () => {
    return useNavigation<NavigationProp<MyPageStackParamList>>();
}
const modalNavigation = () => {
    return useNavigation<NavigationProp<ModalStackParamList>>();
}

export { mainNavigation, campaginNavigation, makeCampaginNavigation, myPageNavigation, modalNavigation }

이동 예제

예를 들어 CampaignStack.Campaign ⇒ MakeCampaginStack.MakeCampagin 이동하고 싶다!

const mainNav = mainNavigation();
mainNav.navigate('MakeCampaginStack', { screen: "MakeCampagin", params: {}})

MakeCampaginStack.MakeCampagin ⇒ MakeCampaginStack.MakePinPoint

const makeCampaginNav = makeCampaginNavigation(); 
makeCampaginNav.navigate("MakeCoupon", { coupon: item, editIndex: idx })