[React Native] Tab Navigator

@Joy Lee · March 01, 2023 · 4 min read

React Navigation 설치

React Native 프로젝트에서 React Navigation을 사용하면 앱 내에서 다양한 화면 간에 네비게이션을 쉽게 구현할 수 있다.

React Navigation Docs

  • 설치
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
  • MAC 사용자는 추가로 설치
npx pod-install ios

Bottom Tab Navigation

React Navigation로 화면 하단에 탭 네비게이션 UI를 구현할 수 있다. 이를 위해 createBottomTabNavigator를 사용합니다.

1. Tab Navigator 생성

먼저, Tabs라는 이름의 네비게이터를 생성하고 각각의 탭 메뉴를 설정한다. <ㅠ> (Tab.Navigator 로 컨테이너를 만들고 Tab.Screen으로 탭 메뉴 지정)

// navigation/Tabs.js
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"

const Tab = createBottomTabNavigator()

const Tabs = () => (
  <Tab.Navigator>
    <Tab.Screen name="Movies" component={Movies} />
    <Tab.Screen name="Tv" component={Tv} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
)

export default Tabs

2. 각 화면 컴포넌트 생성

각 탭 메뉴 클릭 시 이동할 화면 컴포넌트를 별도의 폴더에 추가한다

// screens/Movies.js
import React from "react"
import { View, Text } from "react-native"

const Movies = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Movies</Text>
  </View>
)

export default Movies

3. NavigationContainer로 감싸기

App.js애서 NavigationContainer 의 자식요소로 생성한 Tab 컴포넌트 불러온다.

// App.js
import React from "react"
import Tabs from "./navigation/Tabs"
import { NavigationContainer } from "@react-navigation/native"

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

설정 (Configurations)

초기 화면 설정

initialRountName을 사용하여 네비게이션 항목 중 처음 렌더링할 화면을 설정할 수 있다.

const Tabs = () => (
  <Tab.Navigator initialRountName="Search">
    <Tab.Screen name="Movies" component={Movies} />
    <Tab.Screen name="Tv" component={Tv} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
)

공통 옵션 설정

screenOptions를 사용하여 모든 화면에 적용할 설정을 정의할 수 있다. 예를 들어, 메뉴 아이콘이나 텍스트 스타일을 지정할 수 있다.

const Tabs = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarLabelStyle: { backgroundColor: "red" },
      tabBarActiveTintColor: "blue", // active color
    }}
  >
    <Tab.Screen name="Movies" component={Movies} />
    <Tab.Screen name="Tv" component={Tv} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
)

특정 화면 옵션 설정

특정 탭 화면에만 적용되는 설정은 options을 사용하여 정의할 수 있습니

const Tabs = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="Movies"
      component={Movies}
      options={{ tabBarBadge: 5 }} // alert icon
    />
    <Tab.Screen name="Tv" component={Tv} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
)

Icons 추가하기

탭 네비게이션에서 아이콘을 추가하여 더 직관적인 UI를 제공할 수 있다.

  • tabBarIcon 사용 예시
    아이콘을 추가하려면 react-native-vector-icons 라이브러리를 사용하여 tabBarIcon 옵션을 설정한다.
npm install react-native-vector-icons
import React from "react"
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { Ionicons } from "react-native-vector-icons"
import Movies from "../screens/Movies"
import Tv from "../screens/Tv"
import Search from "../screens/Search"

const Tab = createBottomTabNavigator()

const Tabs = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName

        if (route.name === "Movies") {
          iconName = focused ? "ios-film" : "ios-film-outline"
        } else if (route.name === "Tv") {
          iconName = focused ? "ios-tv" : "ios-tv-outline"
        } else if (route.name === "Search") {
          iconName = focused ? "ios-search" : "ios-search-outline"
        }

        return <Ionicons name={iconName} size={size} color={color} />
      },
    })}
    tabBarOptions={{
      activeTintColor: "tomato",
      inactiveTintColor: "gray",
    }}
  >
    <Tab.Screen name="Movies" component={Movies} />
    <Tab.Screen name="Tv" component={Tv} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
)

export default Tabs


REFERENCE
React Navigation Docs https://reactnavigation.org/docs/getting-started/
Nomad Coder https://nomadcoders.co/react-native-for-beginners/lobby

Joy Lee
FRONTEND DEVELOPER