[React Navigation] Nested Navigator

Nested Navigator

• 네비게이터는 own 히스토리를 갖는다.
  • 뒤로가기를 하면 parent 네비게이터가 있더라도 nested stack 내부의 전 스크린으로 이동한다.
• 네비게이터는 own 옵션을 갖는다. title 옵션을 child navigator에서 지정하더라도 parent에게는 영향을 주지 않는다.
• 네비게이터는 own param을 갖는다.
  • nested 네비게이터 안의 스크린에 패스된 파라미터는 parent나 child 네비게이터의 라우트 파라미터에 접근이 불가능하다.
• 네비게이터 액션은 현재 네비게이터에 의해 핸들링되고 만약 핸들링 불가능한 경우 버블링된다.
  • 예를 들어 nested 네비게이터의 첫번째 페이지에 있는 경우 뒤로가기를 하면 부모 네비게이터로 이동한다.
  • 예를 들어 아래 구조에서 Feed 스크린에서 Messages로 네비게이트를 시도했을 때는 nested 내에서 핸들링이 가능하지만 Settings로 네비게이팅은 핸들링을 못해서 parent 네비게이터가 실행한다.
    • Home (Tab.Navigator)
      • Feed (Screen)
      • Messages (Screen)
    • Profile (Screen)
    • Settings (Screen)
• child 네비게이터는 parent 네비게이터의 메서드를 사용할 수 있다.
• nested 네비게이터는 parent의 이벤트를 받지 않는다.
  • 예를 들어 stack 네비게이터가 tab 네비게이터 안에 있다고 할 때, tab 네비게이터가 tabPress 이벤트를 emit해도 stack 네비게이터는 이 이벤트를 listen할 수 없다.
  • parent로 부터 이벤트를 받으려면 navigation.getParent 를 명시적으로 사용해야 한다.
• parent 네비게이터의 UI는 child 네비게이터 UI의 상위에 그려진다.

네비게이팅

• parent 네비게이터에서 child 네비게이터로 이동하면 해당 네비게이터의 initial 스크린이 보여지게 된다.

• 만약 child 네비게이터의 initial 스크린이 아닌 특정 스크린으로 이동하고 싶다면 두번째 파라미터로 스크린을 지정해줘야 한다.

• navigate('Root', { screen: 'Profile', params: { user: 'JANE' } })

• 네비게이터에 지정된 이니셜 라우트 렌더링하기

  • 네비게이터 내의 스크린으로 이동할 때 이 스크린이 initial 스크린으로 사용되고 네비게이터에 지정된 이니셜 라우트는 무시된다.
  • 만약 이 이니셜 라우트를 살리고 싶으면 initial 옵션을 false로 주면 된다. 그러면 뒤로 가기를 할 때 이니셜 스크린이 있다면 그리로 이동하게 된다.

  navigate('Root', { screen: 'Profile', initial: false })

Ref

https://reactnavigation.org/docs/nesting-navigators