[인스타그램클론코딩] #11.2 Tabs Navigation (React Tab Navigation)

안녕하세요 강정호입니다.

 

오늘은 리액트 Tab navigation에 대해서 알아보겠습니다.

 

TabNavigation.js

import React from "react";
import { createAppContainer } from "react-navigation";
import { View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "../screens/Home";
import Notifications from "../screens/Notifications";
import Profile from "../screens/Profile";
import Search from "../screens/Search";

const Tab = createBottomTabNavigator();

export default () => {
    return (
        <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Profile" component={Profile} />
            <Tab.Screen 
                    name="Add" 
                    component={View} 
                    listeners={{
                        tabPress: e => {
                          // Prevent default action
                          e.preventDefault();
                          console.log("Add");
                        },
                      }}
            />
            <Tab.Screen name="Search" component={Search} />
            <Tab.Screen name="Notifications" component={Notifications} />
        </Tab.Navigator>
    </NavigationContainer>
    );
};

//export default createAppContainer(TabNavigation);
       

 

Tab navigation 공식 문서

reactnavigation.org/docs/bottom-tab-navigator/

createBottomTabNavigator | React Navigation

 

Tab navigation이란?

스마트폰 하단에서 클릭하여 화면 전환을 할 수 있도록 하는 탭 바

위 사진에는 Tab navigation으로 4개의 화면이 설정되어 있다.

 

createBottomTabNavigator

이 함수를 사용하면 BottomTabNavigator 컴포넌트를 생성한다.

 

Tab.Navigator와 Tab.Screen

Tab의  Tab.Navigator 컴포넌트를 생성하고 그 안에 여러개의 Tab.Screen을 넣어준다.

그래서 Navigator가 Screen을 감싸고 있는 형태로 만들어 준다.

아래 공식문서에서도 이와 같이 사용하는 방법을 예시로 보여준다.

reactnavigation.org/docs/screen-options-resolution

Screen options with nested navigators | React Navigation

 

tabPress란?

유저가 현재 화면의 탭 버튼을 클릭 했을 때 활성화 되는 이벤트입니다. tabPress는 기본적인 기능으로는 아래와 같은 기능이 있습니다.

- 탭이 포커스 되어 있지 않다면, 탭을 누르는 것은 탭을 포커스 맞추게 함.

- 탭이 포커스 되어 있다면, 스크롤 뷰 화면일 경우  맨 상단으로 올리는 useScrollTop을 사용할 수 있다. 스택 화면일 경우에는 맨위에 있는 화면을 띄워주는 역할을 한다.

reactnavigation.org/docs/bottom-tab-navigator/#tabpress

createBottomTabNavigator | React Navigation