[React-Native] Custom Top Tabs Navigator 상단 탭 바

1️⃣ 요구사항

노란 박스에 담긴 상단 탭바를 개발해보자! (* 안드로이드 기준)

 

 

2️⃣ 라이브러리 설치

react-navigation에서 제공하는 material-top-tabs를 사용하여 상단 탭 바를 개발할 수 있다. 

https://reactnavigation.org/docs/material-top-tab-navigator/

npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-pager-view

 

 

3️⃣ 코드 보기

TabBar 라는 컴포넌트로 만들어보겠습니다.

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import MainContents from '../main/MainContents';
import AppListContents from '../appList/AppListContents';

const Tab = createMaterialTopTabNavigator();

const TabBar = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarLabelStyle: { fontFamily: 'Pretendard-Medium', fontSize: 14 },
        tabBarStyle: { backgroundColor: 'white' },
        tabBarIndicatorStyle: { backgroundColor: 'black' },
      }}>
      <Tab.Screen
        name="MainContents"
        component={MainContents}
        options={{
          tabBarLabel: '나의 업무',
        }}
      />
      <Tab.Screen
        name="AppListContents"
        component={AppListContents}
        options={{
          tabBarLabel: '앱',
        }}
      />
    </Tab.Navigator>
  );
};

export default TabBar;

 

1. screenOptions : navigator 화면에 적용할 옵션

• tabBarLabelStyle: 탭의 label 스타일 설정 (=글꼴 스타일)
• tabBarStyle: 탭 바 스타일 설정
• tabBarIndicatorStyle: 선택한 탭의 스타일 설정

2. Tab

• name: 탭의 이름
• component: 탭의 컴포넌트
• tabBarLabel: 탭의 라벨 (=탭에 표시될 텍스트)

 

이외 다양한 옵션들은 .. https://reactnavigation.org/docs/material-top-tab-navigator/ 요기에 있습니다 !

 

 

3️⃣ 결과