react-navigation/bottom-tabs

Column
탭 메뉴가 하단에 있는 경우
Tags
Tab
간단한 사용예시만 다룬다. Prop이나 다양한 옵션들은 도큐먼트를 참조하자.
https://reactnavigation.org/docs/bottom-tab-navigator/
 
모바일에서 가장 일반적인 네비게이션 스타일.
스크린의 bottom이나 top에 탭 할 수 있는 스크린 종류들이 나열되어 있는 경우다.
 
예제로는 createBottomTabNavigator를 다룰건데,
createMaterialBottomTabNavigator과 createMaterialTopTabNavigator를 써도 무방함.
notion image

설치

사용할 프로젝트 경로로 이동 후 수행해야함
즉, 프로젝트별로 매번 패키지 설치 필요!
#npm을 쓰는 경우
$ npm install @react-navigation/bottom-tabs

#yarn을 쓰는 경우
$ yarn add @react-navigation/bottom-tabs
 

가장 기본적인 형태

가장 기본적인 형태 (아이콘, 애니메이션 효과 등 아무것도 적용 안한 기본 상태)
//App.js

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

const Tab = createBottomTabNavigator();

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>
  );
}

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

아이콘 설정

커스텀 하려면 tab navigator 초기화 시 설정되는 properties들이 있고,
스크린별로 커스텀하려면 options를 이용하면 됨.
 
tabBarIcon으로 아이콘을 설정할 수 있다.
react-native-vector-icons 설치와 겪었던 에러 핸들링은 아이콘 페이지 참조.
아이콘 (+ 아이콘 버튼)
 

네비게이터 컴포넌트에서 스크린별 아이콘 중앙집중화 설정

import * as React from 'react';
import { Text, View } from 'react-native';

import Ionicons from 'react-native-vector-icons/Ionicons'
//Expo에서 하고 있다면 from @expo/vector-icons로 대체하면 됨.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/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>
  );
}

const Tab = createBottomTabNavigator();

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

            if (route.name === 'Home') {
              iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list' : 'ios-list-outline';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >

        {/*여기가 개별 스크린들 */}
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />


      </Tab.Navigator>
    </NavigationContainer>
  );
}
tabBarIcon은 focused state와 color, size 파라미터를 받는 함수다.
 
tabBarIcon은 Tab.Screen의 options prop을 사용할 수도 있지만, 편의를 위해 중앙집중화 시키려고 Tab.navigator의 screenOptions prop으로 설정했다.
스크린별 개별 설정은 아래 코드를 참조하자.
 

스크린 컴포넌트에서 개별 아이콘 설정

Tab.Navigator에서 일괄 설정하지 않고, 스크린에서 별도로 지정도 가능.
<Tab.Screen name="Home" component={HomeScreen}
options={{
  tabBarIcon: ({ focused, color, size }) => {
    let iconName;
    iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';

    // You can return any component that you like here!
    return <Ionicons name={iconName} size={size} color={color} />;
  },
}}
/>
 

아이콘 색상 설정

Tab.Navigator의 tabBarOptions로 설정할 수 있다.
색상 참조
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: 'darkgreen',
    inactiveTintColor: 'gray',
  }}
>

 //스크린 컴포넌트들
....


</Tab.Navigator>
 

알림뱃지 추가

tabBarBadge option으로 뱃지 추가 가능.
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />
고정 값 대신 상태값으로 받아와서 실시간으로 뱃지 수가 변하도록 만들어 활용하면 된다.
React Context, Redex, MobX, 이벤트 등 배지 수를 전달받을 수 있는 방법을 쓰자.
 
<Tab.Screen name="Home" component={HomeScreen}
options={{

  tabBarIcon: ({ focused, color, size }) => {
    let iconName;
    iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';

    return <Ionicons name={iconName} size={size} color={color} />;
  },
  
  tabBarBadge:3

}}/>
 
notion image
 

탭 + 스택 네비게이터

탭으로 화면 바꾸고, 탭 화면에서 뜬 트위터 피드같은 거 누르면 새 창이 열리는 모습을 많이 볼 수 있는데,
이건 탭 화면을 구성하는 스크린에서 스택 네비게이터를 구성했기 때문임.
 
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const HomeStack = createStackNavigator();

//스크린에서 스택 네비게이터를 구성함.
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

//스크린에서 스택 네비게이터를 구성함.
function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer /* 탭 네비게이터 */>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}