React Native: nested navigator

Navigator를 통한 screen 이동 간에, 잘 되던 navigator가 아래와 같이 오류를 뱉었다.

The action 'NAVIGATE' with payload {"name":"WriteList","params":{"bo_table":"notice"}} was not handled by any navigator.

Do you have a screen named 'WriteList'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

 

 

현재 프로젝트에서 Drawer, Tab, Stack 의 3가지 Navigator를 모두 사용하고 있는데,

navigator 가 navigator를 갖게 되는 계층 구조가 생기게 되었고, 이런 경우 nested nagivator가 생기게 되었다고 한다.

 

이런 구조의 navigator 사용시에, 같은 navigator가 아닌 외부(또는 상위) navigator의 screen으로 이동하려고 할 시, screen을 찾지 못하는 오류가 생긴다.

따라서 일반적으로 쓰는

navigation.navigate('스크린명', params=object)

위와 같은 방식이 아닌, 상위 navigator의 screen name을 명시해주도록 해야한다.

navigation.navigate('TabNavigator', {
  screen: '스크린명',
  params: {
    screen: 'nested 스크린명',
    params: object
  }
});

 

해당 예시 커밋은 아래와 같다.

https://github.com/Junanjunan/gnuboard_react_native/commit/d3940b0a0ac6cb390714014510c0241e7de0c65e#diff-740fdf5af6ada88d552b2b149d16480bd68268ab6a146784fba110ef45a448dc

--> Modal.js 파일

 

아래는 공식 문서

https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

 

그리고 아래는 ChatGPT의 자세한 설명

What is a Nested Navigator?

In React Navigation, a navigator is a component that manages a set of screens. You can think of it as a "container" for different screens or routes in your app. Navigators can be of different types, such as stack navigators, tab navigators, and drawer navigators, each providing a specific way for users to navigate between screens.

A nested navigator is when one navigator is placed inside another. This setup is useful for creating complex user interfaces with multiple layers of navigation, such as having tabs inside a drawer, or multiple stacks within tabs.

Why Use Nested Navigators?

Nested navigators allow for more complex and user-friendly navigation structures. Common reasons to use them include:

1. Organizational Benefits: Helps in organizing screens according to their function and accessibility. For example, main categories might be accessible from a drawer, while subcategories are organized in tabs.
2. User Experience: Improves UX by logically grouping related screens and providing multiple navigation methods (like swiping between tabs and opening a side menu).
3. Conditional Navigation: Facilitates conditional navigation flows, where the access to certain stacks or tabs can depend on user actions or login status.

Example of Nested Navigators

Imagine an app with the following structure:

• Main Drawer Navigator: Contains links to the Home screen, Settings, and a Tab Navigator.
• Tab Navigator (nested inside the Drawer): Contains tabs for various categories such as News, Profile, and Info.
• Stack Navigator (nested inside each Tab): Contains individual screens related to each tab category.

Here’s a visual representation:

Drawer Navigator
│
├── Home Screen
├── Settings Screen
└── Tab Navigator
    ├── News Tab
    │   └── Stack Navigator
    │       ├── News List Screen
    │       └── News Detail Screen
    ├── Profile Tab
    │   └── Stack Navigator
    │       ├── Profile Overview Screen
    │       └── Edit Profile Screen
    └── Info Tab
        └── Stack Navigator
            ├── Info Screen
            └── More Info Screen

 

How to Navigate in Nested Navigators

Navigating in nested structures requires specifying not just the destination screen, but also the path through any parent navigators. For example, if you're in the Home Screen and want to navigate to the News Detail Screen, you need to specify both the tab and the stack:

navigation.navigate('TabNavigator', {
  screen: 'NewsTab',
  params: {
    screen: 'NewsDetailScreen',
    params: {
      newsId: 123
    }
  }
});

 

Handling Navigation

When using nested navigators:

• Define your nested structure clearly in your navigation setup.
• Use navigation props to navigate, ensuring you include all necessary layers of the nest.
• Remember that navigation actions are handled by the closest navigator that can resolve them, so specify the correct path if the target is deep within nested navigators.

Understanding and properly implementing nested navigators allows for flexible, sophisticated navigation setups in larger apps, making it easier to manage complex flows and enhance user navigation experiences.