React Navigation (리액트 네비게이션) Bottom tab + 아이콘 추가

#시작 전에

설치방법과 리액트 네비게이션의 구성에 관한 내용을 아래 링크에 담아 두었으니 참고해 주세요.

theseung.tistory.com/5

 

Bottom tab 네비게이션의 구성

Bottom tab 네비게이션은 우리가 자주 볼 수 있는 하단에 매뉴가 구성되어 있는 형태의 네비게이션이다. 

npm install @react-navigation/stack

아래 코드는 Bottom tab 네비게이션을 만드는 코드이다. (사실 stack과 별차이 없다.)

 

1. 어떤 종류의 네비게이션을 만들든 항상 필요한 NavigationContainer 컴포넌트를 추가해 주었다.

2. 해당 네비게이션은 Bottom tab을 만들 것이기 때문에 관련 함수를 추가하였다.

3. 네비게이션에서 사용할 화면을 가져왔다.

4. 이 후 구조는 NavigatorContainer, Navigator, Screen 순서대로 배치하였다.

//NavigationContainer 추가
import { NavigationContainer } from '@react-navigation/native';

//Stack에서 작동하는 Navigator와 Screen를 위해 함수 추가
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//네비게이션에서 사용할 화면 가져오기
//여기서 화면은 우리가 흔히 볼 수 있는 컴포넌트 이다.
import { Join } from '../Screen';

//Stack Navigation만들기
const Tab = createBottomTabNavigator();

const LoginNavigation = ({}) => {
  <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen 
        	name="Join" 
        	component={Join}
        	options={{
          		tabBarVisible: false,
        	}} 
        />
        <Tab.Screen 
        	name="Join2" 
        	component={Join}
        />
      </Tab.Navigator>
  </NavigationContainer>
}

export default LoginNavigation;

* 주의 사항

1. screen에서 component는 겹쳐도 별도의 에러가 없다. 다만, name값은 겹치면 오류가 나고 실행이 안된다. 

 

Bottom tab의 Screen에 들어갈 수 있는 옵션

Screen에는 위에서 tabBarVisible을 적은 것 처럼 다양한 옵션이 들어갈 수 있다.

주로 내 기준에서 자주 사용되는 옵션을 몇가지 알아보고자 한다.

• tabBarVisible
  • 들어가는 값 : Boolean (기본값 true)
  • Screen에 표시되는 하단바를 없앨 수 있다.
• tabBarLabel
  
  • 들어가는 값 : String (Screen의 이름)
  • 하단바에 표시되는 이름을 바꿀 수 있다. 
• tabBarBadge
  
  • 들어가는 값 : String 또는 Number
  • tab에 알림이 온 것 처럼 뱃지가 표시된다. 알림 개수 표시 등 다양하게 사용할 수 있다.
• tabBarIcon
  • 들어가는 값 : 함수
  • 자세한 사용법은 아래에서 포함하겠다.

Bottom tab 네비게이션에 아이콘 추가 구성

아이콘 설치

해당 패키지는 리액트 네이티브에서 아이콘을 사용할 수 있도록 해주는 패키지이다.

npm install react-native-vector-icons

구성

1. 아이콘 패키지를 추가해준다. (다양한 아이콘의 종류를 추가할 수 있지만 우리는 Ionicons를 포함했다.

2. Tab.Navigator에 screenOptions를 통해 tabBarIcon을 작성하였다.

(여기서 route.name에는 해당 screen의 name 속성값이 표시된다. )

//NavigationContainer 추가
import { NavigationContainer } from '@react-navigation/native';

//Stack에서 작동하는 Navigator와 Screen를 위해 함수 추가
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//아이콘 패키지 중 Ionicons추가
import Ionicons from 'react-native-vector-icons/Ionicons';

//네비게이션에서 사용할 화면 가져오기
//여기서 화면은 우리가 흔히 볼 수 있는 컴포넌트 이다.
import { Join } from '../Screen';

//Stack Navigation만들기
const Tab = createBottomTabNavigator();

const LoginNavigation = ({}) => {
  <NavigationContainer>
      <Tab.Navigator
      	screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if(route.name == "Join"){
            iconName = "home-outline";
          }else if(route.name == "Join2"){
          
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
    >
        <Tab.Screen 
        	name="Join" 
        	component={Join}
        	options={{
          		tabBarVisible: false,
        	}} 
        />
        <Tab.Screen 
        	name="Join2" 
        	component={Join}
        />
      </Tab.Navigator>
  </NavigationContainer>
}

export default LoginNavigation;

설명

screenOptions은 모든 스크린에 작성되는 옵션을 작성할 때 저렇게 적는다.

해당 함수의 인자값 route는 어떤 스크린인지 확인 할 수 있는 것이다. (route.name에는 스크린의 name이 나온다.

route.name을 활용하여 아이콘의 종류를 결정하고 변경한 것을 볼 수 있다.

 

아래 참고 링크로 react-native-vector-icons npm 사이트를 첨부하니

자신이 원하는 아이콘을 잘 활용해 멋있는 매뉴를 만들어 보세요!

 

react native vector Icon 통합 검색 : oblador.github.io/react-native-vector-icons/

react native vector icon : www.npmjs.com/package/react-native-vector-icons

React navigation 래퍼런스 : reactnavigation.org/docs/bottom-tab-navigator/#options