하단 탭 내비게이터(Bottom Tab Navigator) 사용하기

하단 탭 내비게이터(Bottom Tab Navigator) 설정 및 사용법

하단 탭 내비게이터(Bottom Tab Navigator)는 이름 그대로 하단에 탭을 보여주는 내비게이터다. 트워터, 유튜브, 인스타 등 많은 앱에서 하단 탭을 사용하고 있다.

하단 탭 내비게이터를 사용하기 위해선 아래 명령어를 사용해 라이브러리를 추가해야 한다.

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

사용 예제 코드

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Text} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return <Text>Home</Text>;
}

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

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

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

function BottomTabNavigationApp() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: '홈',
            tabBarIcon: ({color, size}) => (
              <Icon name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Search"
          component={SearchScreen}
          options={{
            title: '알림',
            tabBarIcon: ({color, size}) => (
              <Icon name="notifications" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Notification"
          component={NotificationScreen}
          options={{
            title: '검색',
            tabBarIcon: ({color, size}) => (
              <Icon name="search" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Message"
          component={MessageScreen}
          options={{
            title: '메시지',
            tabBarIcon: ({color, size}) => (
              <Icon name="message" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default BottomTabNavigationApp;

 

하단 탭 커스터마이징

Tab.Navigator의 screenOptions Props를 통해 하단 탭에 대한 설정도 커스터마이징이 가능하다.

<Tab.Navigator
  initialRouteName="Home"
  screenOptions={{
    tabBarActiveTintColor: '#fb8c00',
    tabBarShowLabel: false,
  }}>

  ...
  
</Tab.Navigator>

• tabBarActiveTinitColor : 활성화된 항목의 아이콘과 텍스트 색상
• tabBarActiveBackgroundColor : 활성화된 항목의 배경색
• tabBarInactiveTintColor : 비활성화된 항목의 아이콘과 텍스트 색상
• tabBarInactiveBackgroundColor : 비활성화된 항목의 배경색
• tabBarShowLabel : 항목에서 텍스트의 가시성 설정(default : true)
• tabBarShowIcon : 항목에서 아이콘의 가시성 설정(default : false)
• tabBarStyle : 하단 탭 스타일
• tabBarLabelStyle : 텍스트 스타일
• tabBarItemStyle : 항목 스타일
• tabBarLabelPosition : 텍스트 위치
  - beside-icon : 아이콘 우측
  - below-icon : 아이콘 하단
• tabBarAllowFontScaling : 시스템 폰트 크기에 따라 폰트 크기를 키울지 결정(default : true)
• tabBarSafeAreaInset : SafeAreaView의 forceInset 덮어쓰는 객체(default: {bottom: 'always', top: 'naver'})
• tabBarKeyBoardHidesTabBar : 키보드가 나타날 떄 하단 탭을 가릴지 결정(default : false)

 

네이티브 스택 내비게이터와 하단 탭 내비게이터를 함께 사용하기

상황에 따라 여러 개의 내비게이터를 함께 사용할 수 있다.

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

const Tab = createBottomTabNavigator();

function MainScreen() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarActiveTintColor: '#fb8c00',
        tabBarShowLabel: false,
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: '홈',
          tabBarIcon: ({color, size}) => (
            <Icon name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          title: '알림',
          tabBarIcon: ({color, size}) => (
            <Icon name="notifications" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notification"
        component={NotificationScreen}
        options={{
          title: '검색',
          tabBarIcon: ({color, size}) => (
            <Icon name="search" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Message"
        component={MessageScreen}
        options={{
          title: '메시지',
          tabBarIcon: ({color, size}) => (
            <Icon name="message" color={color} size={size} />
          ),
        }}
      />
    </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;

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

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="main"
          component={MainScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
          options={{title: '상세보기'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

네이티브 스택 내비게이터에서 MainScreen의 화면을 설정할 때, options에 headerShown값을 false로 설정하지 않는다면 두 개의 헤더가 나타나므로 오류가 발생한다.두 가지 이상의 내비게이터를 사용할때는 이 설정을 꼭 해줘야 한다.