리액트 네이티브 X EXPO 탭 네비게이터 설정 및 TabNavigator 사용방법을 알아보자

 

탭 내비게이터란?

 

여러 앱들이 아래의 UI를 많이 채택해서 사용하고 있습니다

탭이라는 하단 영역에 직관적인 아이콘을 사용함으로써

페이지 이동을 보다 자유롭게 하게 함입니다

 

스택 내비게이터와 비슷하며 두 개를 같이 사용한다고만 알고 계시고 

예문을 보면서 같이 알아보도록 하겠습니다

 

 

 

2022.07.04 - [Mobile/React Native] - React Native_스택 내비게이션 활용 페이지와 컴포넌트 이동

React Native_스택 네비게이션 활용 페이지와 컴포넌트 이동

 

 

탭 네비게이터 설정방법

 

 

페이지 구성

 

마이페이지와 그리고 메인 페이지, 팁 페이지, 페이지를 추가할 페이지를 

만들어 보겠습니다

 

 

탭 네비게이터 영역의 아이콘 노출이미지

 

 

 

각각 영역을 선택하게 되면 아래와 같은 페이지가 노출되게 연결하겠습니다

 

 

구현 할 페이지 이미지

 

 

탭 내비게이터 영역에 들어갈 페이지를 컴포넌트로 탭 내비게이터와 연결합니다

 

 

탭 네비게이터 라이브러리 추가

 

아래와 같이 라이브러리를 추가하여 줍니다.

 

yarn add @react-navigation/bottom-tabs

 

 

TabNavigator.js 파일을 생성하고 

아래와 같이 코드 작성을 합니다

 

 

탭 네비게이터 코드 작성

 

import React, { useEffect } from 'react';

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

import TipPage from '../pages/TipPage';
import MainPage from '../pages/MainPage';
import MyPage from '../pages/MyPage';
import AddPage from '../pages/AddPage';
import { Ionicons } from '@expo/vector-icons';

const Tabs = createBottomTabNavigator();

const TabNavigator = ({ navigation, route }) => {
  return (
    <Tabs.Navigator
      screenOptions={({ route }) => ({
        tabBarShowLabel: true,
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopColor: '#eee',
          height: 40,
          fontSize: 10,
        },
        tabBarIcon: ({ focused }) => {
          let iconName = Platform.OS === 'ios' ? 'ios-' : 'md-';

          if (route.name === 'MainPage' || route.name === 'TipPage') {
            iconName += 'list';
          } else if (route.name === 'AddPage') {
            iconName += 'apps-outline';
          } else if (route.name === 'MyPage') {
            iconName += 'person';
          }
          return (
            <Ionicons
              name={iconName}
              color={focused ? 'hotpink' : 'grey'}
              size={26}
            />
          );
        },
      })}

    >
      <Tabs.Screen name="MyPage" component={MyPage} />
      <Tabs.Screen name="MainPage" component={MainPage} />
      <Tabs.Screen name="TipPage" component={TipPage} />
      <Tabs.Screen name="AddPage" component={AddPage} />
    </Tabs.Navigator>
  );
};

export default TabNavigator;

 

 

위의 코드를 보시면 화면 아래 탭 영역에 추가할 페이지를 컴포넌트 속성에 할당합니다

그러면 아래 탭 영역에는 4개의 아이콘이 노출되는 것을 확인할 수 있습니다

 

 

그리고 위의 아이콘들은 Expo에서 제공하는 아이콘들입니다

 

 

Expo 아이콘 활용하기

라이브러리를 아래와 같이 추가하시면 사용이 가능합니다

 

 

expo install expo-font

 

 

라이브러리를 사용하는데 약간의 규칙이 있습니다

아래의 부분을 보시면

Palatform.os의 함수를 사용하면 ios인지 안드로이드 인지 구분을 할 수 있는 값을 return 합니다

그 값을 활용해서 사용할 아이콘의 이름을 플랫폼별 다른 값을 더해 노출할 수 있습니다 

 

그리고 focused를 통해 클릭할 당시의 색깔을 변경할 수 있습니다

 

 

 

 

반응형

 

 

 

탭 네비게이션의 속성 활용법

 

 

플렛폼별 아이콘 설정법

 

 

또한,

공식문서를 보면 더 많은 아이콘들을 확인할 수 있습니다

그리고 공식 문서는 사이드 메뉴에 라이브러리 공식문서 칸에 등록해놓겠습니다

 

 

전체 방문자 밑에 있으니 클릭해서 보세요

 

 

expo 공식문서 소개

 

 

그리고!

screenOptions에 여러 가지 속성을 부여할 수 있다

경우에 맞게 속성을 부여해 봅시다~

 

• tabBarActiveTinitColor : 활성화된 항목의 아이콘과 텍스트 색상
• tabBarActiveBackgroundColor : 활성화된 항목의 배경색
• tabBarInactiveTintColor : 비활성화된 항목의 아이콘과 텍스트 색상
• tabBarInactiveBackgroundColor : 비활성화된 항목의 배경색
• tabBarShowLabel : 항목에서 텍스트의 가시성 설정(default : true)
• tabBarShowIcon : 항목에서 아이콘의 가시성 설정(default : false)
• tabBarStyle : 하단 탭 스타일
• tabBarLabelStyle : 텍스트 스타일
• tabBarItemStyle : 항목 스타일
• tabBarLabelPosition : 텍스트 위치
  - beside-icon : 아이콘 우측
  - below-icon : 아이콘 하단
• tabBarAllowFontScaling : 시스템 폰트 크기에 따라 폰트 크기를 키울지 결정(default : true)
• tabBarSafeAreaInset : SafeAreaView의 forceInset 덮어쓰는 객체(default: {bottom: 'always', top: 'naver'})
• tabBarKeyBoardHidesTabBar : 키보드가 나타날 때 하단 탭을 가릴지 결정(default : false)

 

 

 

screenOptions에서 route 값을 활용하고 싶으면

화살표 함수를 이용해서 return으로 통으로 값을 할당할 수 있습니다

그래서 현재 name를 활용해서 플랫폼 별 아이콘을 설정할 수 있습니다

 

 

scrennOption 설정 방법

 

route name 활용

 

 

route와 focused 이외에도 여러 속성이 존재합니다

아래와 같이 screenOptions에 있는 속성들을 navigation안에 여러 함수들과

조금 전에 사용한 route를 보실 수 있습니다

 

 

screenOptions 속성

 

 

tabBarIcon에도 여러 가지 속성을 확인하실 수 있습니다

 

tabBarIcon 속성

 

여러 가지를 속성들을 확장연산자를 사용하여 object안에 있는 변수를 바로 사용하는 모습을 볼수 있어요

상황에 맞게 여러가지 속성들을 사용하면 될 것 같습니다

다른 옵션에도 어떠한 속성들이 있는지 확장 연사자를 쓰지 전에 props로 받아서 

console.log()로 확인을 해보시길 바랍니다.

 

 

stackNavigator.js에 상단에 추가해주면 되겠습니다

return의 상단에 하셔야 합니다!!

<Stack.Screen name="TabNavigator" component={TabNavigator} options={{ headerShown: false }}/>

 

 

이것으로 탭 내비게이션의 설정법을 알아보았습니다

다음에는 활용법을 알아보도록 하겠습니다

그런데 너무 길어지지 다음 포스팅에 알아보도록 하겠습니다

 

오늘도 조금 어려운 점이 없지 않았나 하고 생각 드네요

그래도 새로운 것을 공부하는 것은 필요하다고 생각합니다

IT 개발자들은 필수이지요!!

 

자체 플랫폼 서비스를 하는 곳에서는

쓰는 언어나 패턴들이 정형화되어 새로운 공부를 하지 않게 되는데

요즘 개발자가 귀한 상황이니 열심히 공부해서 더 좋은 곳으로 이직하는 것도 좋은 방법이겠네요

 

파이팅 하시고 힘들어도 힘내세요!

아직 대모험은 끝나지 않았으니까요!

파이팅!!