중첩된 Navigator 안에서 자유롭게 이동하기

Jay Yu·2022년 11월 3일
0

문제 상황 :

현재 사내 어플리케이션은 크게 2가지 네비게이터로 이루어져 있습니다.

  1. Material Tab Bar Navigator
  2. Stack Navigator

기본적으로는 Tab Bar Navigator 내부에서 navigator.navigation 메소드를 활용해서 화면 간의 이동을 하고 있었고, 아무 생각없이 기존의 Navigator 내부에 또 다른 Navigator 스택을 쌓는 식으로 하단의 Tab Bar를 계속해서 보여주고 있었습니다.

그러던 중 특정 화면 진입시 하단의 Tab Bar를 보여주지 않아야 했습니다. 그리하여 검색을 하던 도중 어플리케이션에서 사용하는 @react-navigation/material-bottom-tabs에는 display 라는 option이 있는 것을 파악했습니다.

하여, 다음과 같이 코드 작성이 가능했습니다.

<Tab.Navigator
      barStyle={{
        padding: 0,
        margin: 0,
        backgroundColor: "#F4F4F4",
        elevation: 4,
        shadowOffset: { width: wp(8), height: wp(8) },
        shadowColor: "rgb(0,0,0)",
        shadowOpacity: 0.2,
        shadowRadius: wp(8),
        borderTopWidth: wp(1),
        borderTopColor: "#E8E8E8",
        display : "none" <===
      }}/>

하지만 위와 같이 display 값을 조건부로 변경하기 위해서는 전역적인 state의 공유가 필요했고, 추가적인 연산이 필요하다고 생각이 들어 이보다 더 괜찮은 방법이 있을거라고 생각하였습니다.

현재 앱의 navigator 구조에는 noTab이라는 폴더가 존재하고, 이 하위에는 탭 네비게이터를 보여주지 않는 여러 화면들이 <Stack.Screen> 의 형태로 존재합니다. 그리하여 저도 이 noTab Navigator에 제가 하단 탭을 보여주지 않았으면 하는 화면을 Stack의 형태로 쌓았습니다.

....	

		<Stack.Screen name={"GiftMemoryDetail"} component={GiftMemoryDetail} />
 </Stack.Navigator>

이렇게 먼저 이동할 화면을 정의해놓고 나서, 여느때와 같이 navigation.navigate 메소드로 위에 기술한 GiftMemoryDetail 화면으로 이동을 시도했습니다.

onPress={()=>navigation.navigate("GiftMemoryDetail", {infoFromList})}

위의 코드의 infoFromList는 “GiftMemoryDetail”로 유저가 이동할 때 지니고 이동해야 할 params입니다.

에러 발생

그러나 다음과 같은 에러가 발생하였습니다.

The action 'NAVIGATE' with payload {…params 정보} was not handled by any navigator.
Do you have a screen named ‘GiftMemoryDetail’?
If you’re trying to navigate to a screen in a nested navigator, see
https://reactnavigation.org/docs/5.x/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

직역하자면, 어떠한 navigator도 {…params 정보}를 가지고 이동하는 Navigate 액션을 담당하고 있지 않다. GiftMemoryDetail이라는 name을 가진 스크린을 가지고 있는 것이 확실하느냐 ?

라고 물어보는 에러 메시지였습니다.

물론 저는 GiftMemoryDetail이라는 name을 가진 스크린을 가지고 있었고, 휴먼 에러인 오타도 없이 정확히 해당 스크린으로 이동을 명시하고 있었습니다. 그렇게 계속해서 원인을 찾지 못하여 위의 에러 메시지에서 추천해준 공식 문서로 이동하여 글을 읽어보았습니다.

공식 문서로 이동

How I solved this problem

결론부터 말하자면, 위의 글을 참고한 이후 문제를 해결하였고, 해결한 코드는 다음과 같습니다.

navigation.navigate("NoTab", {
        screen: "GiftMemoryDetail",
        params: { infoFromList },
      });
    },

제가 가지고 있었던 문제는 다음과 같습니다.

현재 어플리케이션은 다음과 같은 네비게이터 구조를 가지고 있습니다.

Root Navigator ---- No Tab --- Screens
|
---- Main Tab --- Screens
|
---- etc ... --- Screens

문제는 여기서 발생했습니다. 제가 navigation.navigate() 메소드를 호출하는 영역, Screen은 Main Tab 네비게이터 안에 존재했고, 제가 navigate 메소드를 호출함으로서 이동하고자 하는 영역, Screen은 No Tab 네비게이터에 존재했습니다.

공식문서에서는 이러한 상황을 Navigating to a screen in a nested navigator, 직역하자면 중첩된 네비게이터 안에서의 이동 이라고 표현하고 있습니다.

이전에 작동하지 않았던 코드에서는 “NoTab” 네비게이터 안에 있는 “GiftMemoryDetail” 스크린으로 이동하겠다 라고 명시해주지 않았기 때문에, Main Tab 네비게이터 안에서 “GiftMemoryDetail” 스크린을 탐색하였고, 그 결과 없는 스크린이라고 react navigation은 판단한 것이라고 생각해 볼 수 있겠습니다.

결론 : 공식문서를 잘 활용하자 ! 항상 내 코드에 문제가 있다.

profile
니체의 마인드셋으로

0개의 댓글