5.3.3 머티리얼 상단 탭 내비게이터

이번에 알아볼 머티리얼 상단 탭 내비게이터(Material Top Tab Navigator)는 앞에서 배운 하단 탭 내비게이터와 유사합니다. 이 내비게이터는 탭을 상단에 위치시킬 수 있습니다. 그리고 탭을 누르면 구글의 머티리얼 디자인 특유의 물결(ripple) 효과가 나타납니다. 화면을 스와이프하는 형태로 우측/좌측 탭으로 전환할 수도 있습니다.

내비게이터를 사용하기 위해 다음 라이브러리들을 설치해주세요.

$ yarn add @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view

react-native-tab-view는 리액트 네이티브에서 탭을 구현할 수 있게 하는 라이브러리입니다. react-navigation에 종속되지 않는 라이브러리이기 때문에 다른 내비게이션 관련 라이브러리와 함께 사용할 수도 있습니다.

설치 후에는 기존에 사용한 하단 탭 내비게이터를 대체해보겠습니다.