현재 네비게이션 현황 제어

Column
Tags
reset actionstate네비게이션 화면 제어

reset action

notion image
공식 문서의 내용에 거를 내용이 없다.
같은 화면과 내용이더라도 key가 다르다면 다른 화면으로 인지하고 기존의 스크린 컴포넌트는 제거하고 새로운 화면을 생성한다.
특정 부분만 변경하고 나머지는 그대로 사용하고 싶을 경우에는 기존의 내용을 그대로 전달하면 생성되어 있던 기존의 스크린 컴포넌트를 재사용 한다.

state

{
  "stale": false,
  "type": "stack", // 현재 스택 타입 : 스택 | 탭 | 드로워
  "key": "stack-YhZJ_hxBmycyLILK5lC0R", // 이 네비게이터를 식별하는 unique key
  "index": 0,

  "routeNames": [ // 이 네비게이터에 선언된 스크린 이름 전체 나열
    "GroupList",
    "NoPasswordUser",
    "DispensingStack",
    "EngineRegisterStack",
    "CartridgeChangeGuide",
    "SearchProfile",
    "SearchProfileResult",
    "InsufficientNotificationBeforeDispensing",
    "MemoryChipDebug",
    "GlobalModal",
    "NoticeBottomSheetModal",
    "SettingBottomSheetModal",
    "CupReminderBottomSheetModal",
    "CartridgeBottomSheetModal",
    "DiagnosisStack"
  ],

	"routes": [ // 현재 네비게이터 내에서 렌더링 되어있는 스크린 정보
    {
      "key": "GroupList-nyIIkRibjY5gMWsJH_Od6", // 화면에 대한 unique key이며, 자동 생성된다.
      "name": "GroupList" // routeName
    },
    {
      "key": "GlobalModal-gf3Tm8LoLQlRDmhHCqQse", // 화면에 대한 unique key이며, 자동 생성된다.
      "name": "GlobalModal", // routeName
      "params": { ... }
    }
  ]
}
state 예시
nested 된 스택 구조까지 이해하면 끝!
const state = {
  type: 'stack',
  key: 'stack-1',
  routeNames: ['Home', 'Profile', 'Settings'],
  routes: [
    {
      key: 'home-1',
      name: 'Home',
      state: {
        key: 'tab-1',
        routeNames: ['Feed', 'Library', 'Favorites'],
        routes: [
          { key: 'feed-1', name: 'Feed', params: { sortBy: 'latest' } },
          { key: 'library-1', name: 'Library' },
          { key: 'favorites-1', name: 'Favorites' },
        ],
        index: 0,
      },
    },
    { key: 'settings-1', name: 'Settings' },
  ],
  index: 1,
};

네비게이션 화면 제어

스택 네비게이터에서 중간에 있는 화면 하나를 제거하고 싶고, 나머지 화면은 새로 렌더링 하지 않고 기존의 내용을 그대로 유지하고 싶다는 상황을 가정한다.
import { CommonActions } from '@react-navigation/native';

navigation.dispatch(state => {
  // Remove the home route from the stack
  const routes = state.routes.filter(r => r.name !== 'Home');

  return CommonActions.reset({
    ...state,
    routes,
    index: routes.length - 1,
  });
});