[React Native] Stack / Tab Navigation 함께 사용 및 중첩 해서 사용하기

https://reactnavigation.org/

React Navigation | React Navigation

 

React에서는 다른 컴포넌트로 화면 전환하는 방법으로 Router가 있었다.

URL을 설정하고, 거기에 맞는 컴포넌트를 설정한 뒤, 자기가 원하는 곳에 버튼을 만들어 두면 쉽게 화면전환을 할 수 있었다.

 

React Native의 다른 컴포넌트의 화면 전환 방법으로는 크게 Stack, Tab, Slide가 존재한다.

여기서 사용할 것은 Stack Navigation과 Tab Navigation이다.

 

Stack Navigation

Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

Stack Navigation은 스택 자료구조를 생각하면 쉽다. 처음에 빈 리스트에서 어떠한 컴포넌트를 이동할 때마다, 최근에 이동했던 컴포넌트가 스택의 가장 위에 쌓이는 원리로, 뒤로가기를 누르면 제일 최근의 컴포넌트로 다시 이동한다. Stack Navigation은 컴포넌트의 보이는 버튼으로 밖에 화면을 이동할 수 밖에 없다. (버튼 배치의 문제)

 

Tab Navigation (Bottom Tab Navigation)

A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.

Tab Navigation은 흔히 어플에서 볼 수 있는 하단에 버튼을 눌렀을때 다른 화면으로 전환되는 네비게이션이다. Tab Navigation으로는 하단의 버튼의 수 만큼밖에 화면을 이동 할 수 밖에 없다.

 

각각 Stack Navigaiton과 Tab Navigation의 단점을 극복하기 위하고 사용자 접근성을 높이기 위해 둘을 동시에 사용하는 것이 좋을 것이다.

이를 Nesting Navigators라고 한다.

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

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

 

Stack 안에 Tab을 넣는 것도 가능하고 역으로 Tab 안에 Stack을 넣는 것도 가능하다.

구글링으로 찾아봤지만 3중으로 구현한 사람들의 코드를 찾을 수가 없어서 내가 직접 구현했다.

나는 Stack 안에 Tab 다시 Tab 안에 Stack을 넣는 방식으로 구현했다.

이해를 돕기 위한 그림

 

와이어 프레임

 

위에 와이어 프레임을 보면, 로그인과 회원가입은 Tab 네비게이션을 필요로 하지 않는다.

하지만 화면 전환은 이루어져야 하니, 이를 Stack에 담아 둔다.

로그인이 이루어진 뒤에는 Tab 네비게이션으로 넘어가게한 뒤, 모든 작업들이 Tab 네비게이션 안에서 이루어지도록 한다.

위에 와이어 프레임은 로그인을 한 뒤, 좌측 3번째부터 마지막까지 Tab 네비게이션 중 Home Stack에 담겨있는 컴포넌트 들이다. 하단 Tab 버튼이 아닌 사람 아이콘이나 버튼을 누름으로 컴포넌트들 전환이 이루어지고 뒤로가기로 최근 컴포넌트로 돌아갈 수 있게 했다.

Stack과 Tab 네비게이션의 자세한 사용 방법은 공식문서를 참고하자.

 

 

제일 상단의 Stack

Tab.Screen에 HomeScreen이라는 Stack으로 연결한다.

가장 깊은 HomeScreen Stack

여기서 문제점은, Stack이 2중이기 때문에 가장 하단의 Stack에서는 Header가 2개로 보이고 우리가 제일 상단의 회원가입과 로그인에서 Header가 보일 것이다.

Header가 안보여야 한다.

Header가 2개가 되어버렸다.

 

이는 가장 상단의 Stack에 이 코드를 추가하면 Header가 안나타난다.

screenOptions={{ 
        headerShown: false,
      }}

Header가 필요 없는 곳에선 사라짐

Header가 하나만 필요한 곳에 생김