[React TIL] 여러 내비게이션을 동시에 적용하기
React Navigation
React Navigation (https://reactnavigation.org/docs/4.x/getting-started) 라이브러리는 리액트 네이티브 앱을 만들 때 스크린 내비게이션 스택을 쉽게 관리할 수 있게 해주는 커뮤니티 라이브러리이다. 이 라이브러리를 설치하면, 앱에서 구현되는 대표적인 내비게이터 - 드로어(Drawer), 스택(Stack), 탭(Tab) - 내비게이터를 자유로운 커스터마이징 옵션과 함께 구현할 수 있다. 안정화된 최신버전이 4버전 대인 것 같아서 4버전을 쓰고 있기에 이 버전을 기준으로 구현한 내용을 적어보려고 한다.
Drawer와 Stack 동시에 적용하기
드로어 내비게이터에 서랍(Drawer)이라는 이름이 붙은 이유는 아마도 좌측 혹은 우측에서 서랍처럼 열리고 닫히는 동작이 있기 때문인 것 같다. 리액트 내비게이션의 내비게이터 생성 함수들은 첫번째 인자로 라우트를 받고, 두번째 인자로 config(옵션 설정)을 받는 규칙을 공통적으로 갖는다. 드로어 내비게이터를 생성할 때는 createDrawerNavigator() 함수를 실행하고, 첫번째 인자로는 메인스크린에 대한 라우트 설정을 넣어주고, 두번째 인자로는 기타 옵션 설정을 넣어준다. 사이드메뉴로 사용할 컴포넌트 이름, 헤더모드, 사이드메뉴의 위치(좌 혹은 우), 루트가 되는 최초 스크린 등을 기타 옵션으로 넣어줄 수 있다.
https://gist.github.com/yeonwooz/83f0c8049c618fc26011b81c73fff517
드로어는 드로어대로 홈스크린에서 열리도록 하고, 사이드메뉴에 나타나지 않는 다양한 스크린들을 스택으로 쌓고 싶을 수 있다. 그런 경우에는 모든 라우트들을 Routes 객체에 넣어주고, 이 Routes 를 createStackNavigator() 함수의 인자로 준다.
https://gist.github.com/yeonwooz/f21dd3b11bc52f80fde1e7c3ed9de769
리액트 내비게이션은 하나의 내비게이터만을 컨테이너 내비게이터로 등록하도록 권장한다. (https://reactnavigation.org/docs/4.x/common-mistakes/) 위에 삽입한 두 스니펫의 가장 마지막 라인의 createAppContainer() 를 통해 생성한 AppContainer 안에서 또다른 AppContainer 를 렌더하려고 시도하면 경고가 발생한다.
Stack 과 Tab 동시에 적용하기
탭에는 상단탭과 하단탭이 있고, React Navigation에서는 두가지 모두 지원한다. 상단탭을 만드는 함수는 createMaterialTopTabNavigator() 이다. 이 함수를 사용하려면 탭 기능과 관련된 별도의 의존성이 있는 라이브러리(react-navigation-tabs)를 설치해야 하는 것으로 알고 있다. 설명은 공식문서에 잘 나와있다.
특정한 스크린에서는 탭 내비게이터를 보여주고 싶을 수 있다. 가령, 내가 만들려고 생각하고 있는 채팅앱을 예로 들어보자. MyPageScreen 이라는 이름의 스크린에서 두개의 탭을 보여주고 싶다면, 등록한 Route 중 해당하는 스크린의 값 자리에 탭내비게이터를 넣어주면 그 스크린 자리에 탭 내비게이터가 등록된다.
https://gist.github.com/yeonwooz/79c701d8223968a5ee8e62e7eb4c2b50
https://gist.github.com/yeonwooz/88a6dd4a41f6d4095fb9dc0698acfdf5
다만 이렇게 하면, MyPageScreen 을 전혀 활용할 수 없게 된다. 상단 헤더를 커스터마이징하고 싶어서 탭의 config 에 헤더를 추가하면, 원하는 대로 스크린의 최상단이 아니라 그보다 약간 아래쪽에 헤더가 생성된다. 지금 만든 탭 내비게이터는 사실상 스택내비게이터에 등록된 하나의 스크린에 들어가있는 탭일 뿐이기 때문이다. 최상단 헤더를 건드리고 싶다면 MyPageScreen 의 헤더, 즉 스택내비게이터의 헤더를 건드릴 수 있어야 한다. 그래서 Routes에는 MyPageScreen 을 그대로 등록하고, 대신 MyPageScreen 컴포넌트에서 익스포트하는 MyPageScreen 객체에 Tabs를 할당해주는 방식으로 변경하였다.
https://gist.github.com/yeonwooz/d9e82d9085545d045815e9558d09c235
https://gist.github.com/yeonwooz/d408fc9dce59c16bf349eff8137d51f2
Photo by Linda Söndergaard on Unsplash
TMI 1
공식문서에는 버전이 6버전 대까지 출시된 것으로 나와있는데, 'React Navigation' 이라는 이름으로 NPM 과 Yarn 패키지매니저에 등록된 라이브러리는 4버전 대가 가장 최신이고 5버전 이후로는 '@react-navigation/native' 라는 이름으로 등록되어있다. 5버전 이상부터는 아직 비공식 버전인 것인지, 아니면 아예 별개의 라이브러리로 분리된 것인지는 잘 모르겠다.
TMI 2
작업속도가 많이 빨라졌다. 정확도도 높아졌다. 하고싶은 것도 약간 생겼다.
