Final Project - (7) 2020_0204

오늘은 메인 스크린을 만들기 전에 앱의 전체적인 스크린의 뼈대가 되는 Bottom Tab Navigation을 만들어보려고 한다. 

 

리액트에서는 react-router-dom을 이용하여 SPA의 형태로 화면을 관리해서 라우터 별로 화면이 다르게 렌더링되게 했다면 리액트 네이티브에서는 스크린 단위로 구성되고 움직이게 된다. 이때 필요한 것이 바로 react-navigation이다.

 

https://reactnavigation.org/docs/en/4.x/getting-started.html

React Navigation · Routing and navigation for your React Native apps

expo 공식 문서를 보니까 react-navigation을 사용해서 스크린 라우팅을 하도록 하고있어서 react-navigation 공식 문서를 보면서 어떻게 스크린 단위로 앱의 화면을 구성하고 스크린 간의 이동은 어떻게 되는지 알아보았다. 스크린 컴포넌트들을 어떻게 작성하여야 하는 지도 알아보았다. 

 

이제부터 앱의 전체적인 스크린들의 뼈대가 될 Bottom Tab Navigation을 구현해보려고 한다.

 

우선 바텀 탭 네비게이션을 구현하기 위해 필요한 라이브러리 들을 설치하였다.

npm install react-navigation react-navigation-tabs

그리고 바텀 탭에 들어갈 기본적인 스크린 컴포넌트들을 만들어 주었다.

 

우리 프로젝트의 경우 메인스크린, 검색, 찜목록, 채팅, 유저인포 5개의 탭이 필요해서 총 5개의 스크린을 만들어주었다.

 

그리고 아까 받은 라이브러리로부터 각각 createAppContainer 와 createBottomTabNavigator를 import하고 createBottomTabNavigator 메소드를 통해서 각 탭에 해당하는 스크린을 설정해주었다. 

 

그 다음 탭에 text가 아닌 icon을 넣어주고 싶어서 expo에서 제공하는 기본 icon (보니까 다른 컴포넌트 라이브러리의 icon들을 가지고오는 형태로 되어있었다)을 사용하기 위해서 @expo/vector-icons을 import하였다.

 

defaultNavigationOptions을 설정해서 tabBarIcon에 switch문을 사용해서 스크린에 맞는 icon을 넣어주었다.

또한 tintColor을 사용해서 tabBarOptions에 active시에는 (탭 누를 시) 색이 보라색으로 되고 아닌 경우에는 회색으로 해서 탭을 누르고 있는 상태를 알 수 있게 해주었다.

 

react-navigation으로 만든 화면들은 createAppContainer로 감싸줘야 작동을 하므로 마지막에 export default를 할 때 createAppContainer로 감싸주었다. 

 

이렇게 해서 나온 결과는 다음과 같다.

Bottom Tab Nav

대충 만든 것 같은데도 생각보다 이쁘게 만들어진 것 같다. ㅎㅎㅎㅎ 뭔가 앱같은것이 만들어지니까 재미있다.

 

bottom tab navigator의 경우 각 탭 별로 화면 전환이 될 때 stack navigator와는 다르게 화면이 쌓이지 않기 때문에 탭 전환 시에 화면이 쌓이지 않고 바로 화면 전환이 되고 뒤로 가기가 나오지 않는다. 

 

이렇게 기본적인 바텀 탭 네비게이터와 해당하는 스크린을 만들어 주었고, 내가 현재 맡은 부분인 메인 스크린을 만들 차례이다.

 

위에서 집모양을 누르면 메인 스크린이 나오도록 할 것인데 메인 스크린 안에서도 더보기 페이지 등으로 스크린이 전환이 될 수 있어야하기 때문에 메인 스크린과 more 스크린을 만들 것이다. 그리고 이 스크린들은 바텀 탭 네비게이터 처럼 전환이 되는 것이 아닌 화면이 쌓여서 뒤로가기를 통해 이전 스크린으로 이동할 수 있어야 하므로 stack navigator를 활용해서 만들 생각이다. 

(즉, 각 탭에 해당하는 스크린을 stack navigator로 만들어주면 각 탭안에서는 화면 전환시 화면이 쌓일 수 있다!!)