머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator) 사용하기

머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator) 설정 및 사용법

머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator)은 이 전 글에 소개한 머터리얼 상단 탭 내비게이터와 비슷한 내비게이터인데, 큰 차이점은 이 내비게이터는 하단에만 나타나며, 활성화된 탭에 따라 전체 탭의 배경색을 변경할 수 있다. 

머티리얼 하단 탭 내비게이터를 사용하기 위해 아래 명령어를 통해 라이브러리를 설치해야한다.

$ yarn add @react-navigation/material-bottom-tabs react-native-paper
$ cd ios
$ pod install
$ cd ..
$ yarn ios
$ yarn android

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

Home · React Native Paper

사용 예제 코드

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

const Tab = createMaterialBottomTabNavigator();

function MainScreen() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        showIcon: true,
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: '홈',
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarLabel: '검색',
          tabBarIcon: ({color}) => (
            <Icon name="notifications" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Notification"
        component={NotificationScreen}
        options={{
          tabBarLabel: '알림',
          tabBarIcon: ({color}) => (
            <Icon name="search" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Message"
        component={MessageScreen}
        options={{
          tabBarLabel: '메시지',
          tabBarIcon: ({color}) => (
            <Icon name="message" color={color} size={24} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}
function HomeScreen({navigation}) {
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="상세보기"
        onPress={() => navigation.push('Detail', {id: 1})}
      />
    </View>
  );
}

function SearchScreen() {
  return <Text>Search</Text>;
}

function NotificationScreen() {
  return <Text>Notification</Text>;
}

function MessageScreen() {
  return <Text>Message</Text>;
}

export default MainScreen;

 

머티리얼 하단 탭 커스터마이징

이 내비게이터에서는 활성화된 탭의 이름이 아이콘 하단에 나타나며, 색상이 진해진다. 그리고 tabBarColor 옵션을 통해 활성화된 탭에 따라 탭 바의 배경색을 변경할 수도 있다.

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarLabel: '홈',
    tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
    tabBarColor: 'black',
  }}/>
<Tab.Screen
  name="Search"
  component={SearchScreen}
  options={{
    tabBarLabel: '검색',
    tabBarIcon: ({color}) => (
      <Icon name="search" color={color} size={24} />
    ),
    tabBarColor: 'gray',
  }}/>

Tab.Navigator Props

• initialRouteName : 초기 화면의 이름
• screenOptions : 화면의 기본 설정
• backBehavior : 뒤로가기할 때의 작동 방식
• shifting : 이 값이 true로 지정되어 있으면 탭이 변경될 때마다 배경색을 변경하고, 활성화 된 탭만 탭의 이름을 보여준다. 탭의 개수가 세 개 이상이면 이 값은 기본적으로 true로 설정된다. 만약 이 값을 false로 지정하면 탭마다 배경색을 따로 따로 지정할 수 없고, 모든 탭에 이름이 보이게 된다.
• labeled : 탭 아이콘 하단에 탭의 이름을 나타낼지 정하는 값이다. 이 값을 false로 지정하면 모든 탭에 이름이 나타나지 않는다.(default : true)
• activeColor : 활성화된 탭의 아이콘과 텍스트 색상
• inactiveColor : 비활성화된 탭의 아이콘과 텍스트 색상
• barStyle : 탭 바에 스타일 적용

Tab.Screen Props

• tabBarIcon : 아이콘을 보여주는 함수, { focused: boolean, color: string } 타입의 파라미터를 받아온다.
• tabBarLabel : 탭에 보이는 이름
• tabBarBadge : 탭 아이콘에 배지를 보여준다. 이 값을 true로 설정하면 아이콘 우측 상단에 빨간색 점을 보여준다. 이 값을 문자열 또는 숫자로 입력하면 그 내용이 배지에 나타난다.

tabBarBadge 예제

<Tab.Screen
  name="Notification"
  component={NotificationScreen}
  options={{
    tabBarLabel: '알림',
    tabBarIcon: ({color}) => (
      <Icon name="notifications" color={color} size={24} />
    ),
    tabBarBadge: '30',
  }}/>

tabBarBadge 적용

 

머티리얼 하단 탭 내비게이터 헤더 타이틀 동기화하기

머티리얼 하단 탭 내비게이터는 머티리얼 상단 탭 내비게이터와 마찬가지로 헤더가 없다. 그래서 현재 네이티브 스택 내비게이터에서 설정된 타이틀이 보여지고 있다. 위 예제로 예를 들면 검색 탭을 선택해도 타이틀이 Main인 것이다.

머티리얼 하단 탭 내이게이터에서 getFocusedRouteNameFromRoute를 사용하여 탭과 헤더의 타이틀을 동기화해야 한다.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import MainScreen from '../component/bottomTabNavigation/MainScreen';
import DetailScreen from '../component/stackNavigation/DetailScreen';
import {getFocusedRouteNameFromRoute} from '@react-navigation/native';

const Stack = createNativeStackNavigator();

function getHeaderTitle(route) {
  const routeName = getFocusedRouteNameFromRoute(route);
  console.log(routeName);
  return routeName;
}

function MultiNavigationApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={({route}) => ({
            title: getHeaderTitle(route),
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MultiNavigationApp;

getFocusedRouteNameFromRoute를 사용해서 받아온 routeNamedmf MainScreen을 사용한 Stack.Screen options에 title로 설정하였다. Stack.Screen의 options Props를 보면 일반 객체가 아닌 객체를 반환하는 함수를 넣어주게 되면 내비게이션의 상태가 바뀔 때마다 함수를 다시 실행하여 화면의 options 객체를 생성한다. 이 함수는 파라미터를 통해 route와 navigation을 받아와서 사용할 수 있다.

위 코드에서 getFocusedRouteNameFromRoute로 받아온 routeName을 console 출력했는데, 확인해보면 처음 앱을 켰을때는 undefined가 찍히는 것을 볼 수 있다.

이 함수를 사용할 때 주의할 점은 화면이 바뀌기 전까지, 즉 초기에는 undefined가 반환된다는 것이다. 따라서 undefined일 때는 내부 내비게이터의 기본 화면의 이름을 사용하도록 로직을 구현해야 한다.

function getHeaderTitle(route) {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
  const nameMap = {
    Home: '홈',
    Search: '검색',
    Notification: '알림',
    Message: '메시지',
  };
  return nameMap[routeName];
}