5.3.4 머티리얼 하단 탭 내비게이터

머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator)는 방금 다룬 머티리얼 상단 탭 내비게이터와 비슷한 내비게이터인데, 큰 차이점이 있습니다. 이 내비게이터는 하단에만 나타나며, 활성화된 탭에 따라 전체 탭의 배경색을 변경할 수 있습니다. 이때 멋진 물결 효과와 함께 배경색을 전환시킬 수 있습니다. 추가로 탭이 활성화될 때 아이콘이 상단으로 조금 움직입니다.

내비게이터를 사용하기 위해 우선 필요한 라이브러리를 설치해주세요.

$ yarn add @react-navigation/material-bottom-tabs react-native-paper

react-native-paper는 리액트 네이티브에서 머티리얼 디자인을 사용할 수 있게 하는 라이브러리입니다. 자세한 내용은 다음 링크를 참고하세요.

• https://callstack.github.io/react-native-paper

그다음에는 MainScreen에서 기존에 사용한 createMaterialTopTabNavigator 대신에 createMaterialBottomTabNavigator를 사용해보겠습니다.

screens/MainScreen.js

import React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {Text, Button, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createMaterialBottomTabNavigator();

(...)