React native 프로젝트 2 - 하단 탭

하단 버튼(탭)을 통해 화면을 전환하는 것을 구현하려고 봤더니 라이브러리가 필수였다. 

https://www.npmjs.com/package/@react-navigation/bottom-tabs

@react-navigation/bottom-tabs

 

npm i @react-navigation/bottom-tabs

 

위 명령어를 통해 설치해주고 추가로 필요한 요소들을 공식문서를 보면서 함께 설치해주었다. 공식문서는 여기(https://reactnavigation.org/docs/getting-started)

https://reactnavigation.org/docs/getting-started/

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

 

기본적으로 하단에 탭을 생성하려면 다음과 같이 컴포넌트를 생성해주면 된다. (코드는 공식문서 예제)

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

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

 

나는 App.js에서 Tab 만드는 것까지 해주었다. 

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import AlarmPage from './pages/screens/AlarmPage';
import Home from './pages/screens/Home';
import {NavigationContainer} from '@react-navigation/native';

const Tab = createBottomTabNavigator();

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

 

이렇게 해줬더니 상단에 탭 이름이 표시되어 옵션을 추가로 주었다.

 

공식문서의 이 부분(https://reactnavigation.org/docs/bottom-tab-navigator/#header-related-options)을 참고했다.

<Tab.Screen
          name="Home"
          component={Home}
          options={{headerShown: false}}
/>

 

이 옵션과 함께 알람이 몇개 왔는지 배지로 보여줄 수 있는 옵션 역시 임시 값(5)를 주어 추가했다.

        <Tab.Screen
          name="Alarms"
          component={AlarmPage}
          options={{headerShown: false, tabBarBadge: 5}}
        />