React Native) 하단 Tab Navigator 사용하기

하단에 탭을 보여주는 네비게이터 사용하기

 

---

 

라이브러리 설치

라이브러리 설치 명령어)

yarn add @react-navigation/bottom-tabs react-native-vector-icons
cd ios
pod install

* 이후 시뮬레이터 재실행 필요(yarn android / yarn ios)

---

 

Tab Navigator 사용하기

사용 예제 코드)

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

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return <Text>Home</Text>;
}
function SearchScreen() {
  return <Text>Search</Text>;
}
function NotificationScreen() {
  return <Text>Notification</Text>;
}
function MessageScreen() {
  return <Text>Message</Text>;
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
	      <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Search" component={SearchScreen} />
          <Tab.Screen name="Notification" component={NotificationScreen} />
          <Tab.Screen name="Message" component={MessageScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

네이티브 스택 네비게이터, 드로우 네비게이터와 구조는 비슷
1) createBottomTabNavigator 함수로 Tab Navigator 객체 생성
2) NavigationContainer 태그 안에 Navigator, Screen 태그 등록해서 스크린 생성

---

 

탭 아이콘 등록하기

탭 아이콘 등록하기)
* iOS)
ios/프로젝트명/Info.plist 파일 최하단에 다음 UIAppFonts 코드 입력

(...)
	<key>UIViewControllerBasedStatusBarAppearance</key>
    	<false/>
        <key>UIAppFonts</key>
        <array>
        	<string>MaterialIcons.ttf</string>
        </array>
    </dict>
</plist>

* Android)
android/app/build.gradle 파일 최하단에 다음 코드 추가

project.ext.vectoricons = [
	iconFontNames: [ 'MaterialIcons.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

이후 yarn ios / yarn android 다시 실행

이후 MaterialIcons를 import 하고 Tab.Screen options에 tabBarIcon을 추가함
예시)

(...)
import Icon from 'react-native-vector-icons/MaterialIcons';

(...)
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      title: '홈',
      tabBarIcon: ({color, size}) => (
        <Icon name="home" color={color} size={size} />
      ),
    }}
  />

color, size는 화면 상황에 맞게 변형되기 위해 파라메터로 넣어줘야 함

---

 

탭 커스터마이징 하기

Tab.Navigator에 screenOptions Props에 다음 속성으로 커스터마이징 함
- tabBarActiveTintColor : 활성화된 항목의 아이콘과 텍스트 색상
- tabBarActiveBackgroundColor : 활성화된 항목의 배경색
- tabBarInactiveTintColor  : 비활성화된 항목의 아이콘과 텍스트 색상
- tabBarInactiveBackgroundColor : 비활성화된 항목의 배경색
- tabBarShowLabel : 항목에서 텍스트의 가시성 설정(기본값: true)
- tabBarShowIcon : 항목에서 아이콘의 가시성 설정(기본값: false)
- tabBarStyle : 하단 탭 스타일
- tabBarLabelStyle : 텍스트 스타일
- tabBarItemStyle : 항목 스타일
- tabBarLabelPosition : 텍스트 위치 'beside-icon'(아이콘 우측) / 'below-icon'(아이콘 하단)
- tabBarAllowFontScaling : 시스템 폰트 크기에 따라 폰트 크기 키울지 결정(기본값: true)
- tabBarSafeAreaInset : SafeAreaView의 forceInset 덮어쓰는 객체(기본값: {bottom: 'always', top: 'never'})
- tabBarKeyboardHidesTabBar : 키보드가 나타날 때 하단 탭을 가릴지 결정(기본값: false)

예시 - 텍스트 숨기고 활성화된 항목 아이콘 색상 주황색으로 설정)

<Tab.Navigator
  initialRouteName="Home"
  screenOptions={{
    tabBarActiveTintColor: '#fb8c00',
    tabBarShowLabel: false,
  }}>

 

---

 

네이티브 스택 네비게이터와 하단 탭 네비게이터 함께 사용하기

App.js 내 최상단 네비게이터는 stack으로, 그 안에 메인 스크린은 tab으로 혼용해서 사용

App.js 내 Stack Navigator 사용 예시)

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

MainScreen.js에는 위의 탭 네비게이터 사용 예시와 같이 구성하여 메인 스크린을 구성함
* 단, Stack Navigator 헤더와 Tab Navigator 헤더가 중복되므로, Stack.Screen props에
options={{headerShown: false}}
추가하여 헤더가 두번 나타나지 않도록 함

React Native) 하단 Tab Navigator 사용하기