[React Native] Bottom Tab Navigation 구현하기

Bottom Tab Navigation이란?

Bottom Tab Navigation은 모바일 앱에서 화면 하단에 위치한 탭 바(Tabs)를 통해 여러 화면 간에 이동할 수 있게 해주는 내비게이션 방식입니다. 각 탭에는 아이콘과 라벨을 부여할 수 있으며, 이를 통해 사용자는 직관적으로 원하는 화면으로 전환할 수 있습니다. 이 내비게이션 방식은 특히 많은 기능을 가진 애플리케이션에서 사용자가 주요 기능들 간에 쉽게 접근할 수 있도록 도와줍니다.

 

여기서 잠깐. React Native의 Navigation 종류는?

React Native에서 내비게이션을 구현하는 방법에는 여러 가지가 있습니다. 그 중에서도 자주 사용되는 방법은 다음과 같습니다:

1. Stack Navigation: 한 화면에서 다른 화면으로 이동할 때 새로운 화면이 기존 화면 위에 쌓이는 방식입니다. '뒤로 가기' 버튼을 눌러 이전 화면으로 돌아갈 수 있습니다.
2. Drawer Navigation: 화면 왼쪽 또는 오른쪽에서 드로어(메뉴)가 슬라이드로 나타나고, 이 드로어를 통해 다른 화면으로 이동할 수 있는 방식입니다.
3. Bottom Tab Navigation: 여러 화면을 하단의 탭 바를 통해 이동할 수 있는 방식으로, 주로 주요 기능들을 탭으로 나누어 제공할 때 사용됩니다.

이 중에서도 Bottom Tab Navigation은 직관적이며 사용자가 쉽게 접근할 수 있는 방식이기 때문에 많은 애플리케이션에서 사용되고 있습니다.

 

구현 방법

Step 1. 패키지 설치

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

 

Step 2. Navigation 설정

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View } from 'react-native';

// 간단한 화면 컴포넌트 정의
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

// Tab Navigator 생성
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

 

Step 3. 커스터마이징

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'settings' : 'settings-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}