더북(TheBook)

이제 특정 탭을 선택하면 탭 바의 배경색이 지정한 색상으로 변경될 것입니다.

▲ 그림 5-26 탭 바 배경색 변경

MaterialBottomTabNavigator에 설정할 수 있는 옵션을 알아봅시다. Tab.Navigator 컴포넌트에는 다음과 같은 Props를 지정해줄 수 있습니다.

initialRouteName: 초기 화면의 이름

screenOptions: 화면의 기본 설정

backBehavior: 뒤로가기할 때의 작동 방식

shifting: 이 값이 true로 지정되어 있으면 탭이 변경될 때마다 배경색을 변경하고, 활성화된 탭만 탭의 이름을 보여줍니다. 탭의 개수가 세 개 이상이면 이 값은 기본적으로 true로 설정됩니다. 만약 이 값을 false로 지정하면 탭마다 배경색을 따로 따로 지정할 수 없고, 모든 탭에 이름이 보이게 됩니다.

labeled: 탭 아이콘 하단에 탭의 이름을 나타낼지 정하는 값입니다. 이 값을 false로 지정하면 모든 탭에 이름이 나타나지 않습니다(기본값: true).

activeColor: 활성화된 탭의 아이콘과 텍스트의 색상

inactiveColor: 비활성화된 탭의 아이콘과 텍스트의 색상

barStyle: 탭 바에 스타일 적용

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.