React-navigation이란?

• React-navigation

React-navigation은 react-native 앱의 네비게이션 기능과 히스토리를 간단히 관리 할 수 있는 라이브러리이다. 여기서 네비게이션은 일반 리액트 앱에서 라우트 기능과 비슷하다고 볼 수 있다.

 

리액트의 page처럼 네이티브에는 스크린이라는 개념이 있는데, 스크린은 react-navigation의 도움을 받아서 이동이 가능하다.

 

- Stack navigator

 

dataStructure 중 stack의 형식으로 구현되는 네비게이터이다.

이동시 screen이 하나 씩 stack 형태로 구현된다.(후입선출 - 노드를 순서대로 넣고 노드 제거시, 마지막에 들어간 노드를 먼저 꺼냄).

 

최초 스크린이 가장 먼저 스택에 쌓임.  - >  다음 화면으로 이동 시, (화면 상으로는 이전 화면이 사라지고 새로운 화면이 보이지만,) 구조적으로는 컨테이너에 최초 스크린이 push되고 다음 화면이 push되어 컨테이너에 2개의 노드가 쌓인다.  - >  이전 화면으로 돌아갈 시, 스택의 마지막 화면이 pop되며 남아있는 최초 스크린이 화면에 보인다.

 

 

 

- Tab navigator

 

 

인스타그램의 텝 내비게이션

위의 인스타그램 탭 내비게이션에사 각각의 아이콘들이 탭이며, 버튼을 누르면 페이지로 이동을 한다. 
이 구조는 병렬 구조로 구성된 네비게이터이다. 각각의 탭은 고유한 스택을 가지고 있으며, 각 탭의 여러 스택으로 진입을 해도 다른 탭으로 진입시 선택된 탭의 기본 화면으로 이동한다.

 

- Drawer navigator

 

모바일 앱에서 상단에 위치한 햄버거 버튼을 누를 때 생기는 drawer 도 탭 네비게이션처럼 병렬적인 역할을 한다.

탭 구조는 화면 상/하단에 위치하고 드로어 구조는 화면 좌/우에 위치한다. 작동 방식은 탭 네비게이션과 같다.