[RN] Bottom Tabs Navigator 사용하기

wnsxk2·2024년 12월 31일

💡개요

사용자에게 Tab 이라는 방법으로 쉬운 화면 이동을 제공하기 위해 Bottom Tabs Navigator를 적용해보겠습니다.

Bottom Tabs Navigator란?

화면 아래에 있는 여러 탭을 눌러 화면을 전환하는 기능. 예를 들어 인스타그램의 화면아래 홈, 검색, 추가, 릴스, 프로필 버튼들이 나란히 있는 것이 Bottom Tabs Navigator이다.

매번 새 화면으로 이동하면 "뒤로 가기"가 복잡하고, 사용자는 불편함을 느낄 수 있습니다.
이런 문제를 해결하기 위해 간단한 네비게이션 방법을 제공하는 것이 중요합니다.

👨‍💻구현하기

1️⃣ 라이브러리 설치

React Navigation를 참고하여 자신의 React Native 버전에 맞는 라이브러리를 설치합니다.

## 글쓴이는 yarn을 사용, 자신이 사용하는 패키지 매니저에 맞는 명령어 실행

## Navigation 설치
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context

## bottom-tabs-navigator 설치
yarn add @react-navigation/bottom-tabs

⚠️ 자신의 React Native의 버전을 확인하고 호환성을 본뒤 알맞은 버전으로 설치하자!
~~버전 달라서 에러뜨는걸 모르고 한시간 삽질함...~~

2️⃣ Bottom Tabs Navigator 설정하기

Bottom Tabs Navigator를 사용할 화면에 component추가.

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

const Tab = createBottomTabNavigator();

const HomeTab = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name='home' component={HomeScreen} />
      <Tab.Screen name='shopping' component={ShoppingScreen} />
    </Tab.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <HomeTab />
    </NavigationContainer>
  );
};

Tab.Navigator: 탭을 감싸는 컨테이너
Tab.Screen: 각각의 탭. name은 탭 이름, component는 탭을 눌렀을 때 보여줄 화면
NavigationContainer: React Navigation을 사용하는 데 필수적인 최상위 컨테이너