Bottom tabs navigator 배치하기 - 1

React Native bottom tabs navigator는 위와 같이 화면 하단에 있는 간단한 탭 표시줄로 다른 경로를 전환할 수 있는 네비게이션이다.

 

---

 

1. 설치

아래 명령어를 입력해 관련 라이브러리를 설치한다.(두번째 줄도 설치해줘야 RNSScreen 에러가 발생하지 않는다.)

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

 

 

2. BottomTabs 컴포넌트 생성 및 네비게이터 옵션

@react-navigation/bottom-tabs을 import 해주고 아래와 같이 Tab을 정의해준다.

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

const Tab = createBottomTabNavigator();

 

이후 하단 네비게이션에 넣을 컴포넌트를 <Tab.Navigator> 내부에 <Tab.Screen>으로 배치해준다. 여기서는 Home, 상세페이지, 옵션 이라는 임의의 label으로 앞에서 만든 컴포넌트들을 배치하였다.

// BottomTabs.tsx
const BottomTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Typography_Ex} />
      <Tab.Screen name="상세페이지" component={O_Dictionary} />
      <Tab.Screen name="옵션" component={O_Array} />
    </Tab.Navigator>
  );
};

 

추가로 Navigator에서는 screen option을 지정할 수 있는데 상단에 보이는 헤더와 tab bar 에 있는 각각의 라벨(위에서 지정한 name)을 보이지 않도록 설정해줬다. 

// BottomTabs.tsx
<Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
	}}>
	<Tab.Screen name="Home" component={Typography_Ex} />
	<Tab.Screen name="상세페이지" component={O_Dictionary} />
	<Tab.Screen name="옵션" component={O_Array} />
</Tab.Navigator>

 

 

3. 배치

Root에 있는 App.tsx로 이동해서 위에서 만든 BottomTabs 컴포넌트를 NavigationContainer로 감싸 배치해준다.

// App.tsx
const App = () => {
  return (
    <NavigationContainer>
      <BottomTabs />
    </NavigationContainer>
  );
};