[React-Native] Tob Tabs Navigation 사용하기

모듈 설치

아래에서 없는 모듈만 깔아주자.

npm install @react-navigation/native 
npm install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view

 

사용방법

사용방법은 Stack 및 Bottom Navigation과 동일하기에 이미 navigation을 구현해봤다면 간단할 것이다.

Tab.Screen에서 name은 화면의 별명, component은 화면을 구현하고 있는 컴포넌트 의미한다.

코드에 나와있는 3개의 화면은 따로 화면을 구현한 후 가져오기만 하면 된다.

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

export const App = () => {
    return (
        <Tab.Navigator initialRouteName='Home'>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Mypage" component={Mypage} />
            <Tab.Screen name="Setting" component={Setting} />
        </Tab.Navigator>
    )
}

 

전체 코드

App.js

import React from 'react';
import { SafeAreaView } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { Home } from './src/Home';
import { Mypage } from './src/Mypage';
import { Setting } from './src/Setting';

const Tab = createMaterialTopTabNavigator();

export const App = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <NavigationContainer>
                <Tab.Navigator initialRouteName='Home'>
                    <Tab.Screen name="Home" component={Home} />
                    <Tab.Screen name="Mypage" component={Mypage} />
                    <Tab.Screen name="Setting" component={Setting} />
                </Tab.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    )
}

 

실행화면