[RN] React Navigation TopTab 추가

리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다.

리액트 네이티브 버전 :  "react-native": "0.69.2"

- 지난번에 하단 탭을 만들었었다.

- 이번에는 상단에 위치하는 탭을 만들어보았다.

 

npm i @react-navigation/material-top-tabs

 

- 라이브러리를 설치해준다.

- 다음은 바로 코드 작성

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import TestScreen from './TestScreen';
import Test2Screen from './Test2Screen';

const TopTap = createMaterialTopTabNavigator();

const TopTapScreen = () => {
  return (
    <TopTap.Navigator>
      <TopTap.Screen name="TEST" component={TestScreen} />
      <TopTap.Screen name="TEST2" component={Test2Screen} />
    </TopTap.Navigator>
  );
};

export default TopTapScreen;

 

- 네비게이션이나, 하단탭에 비해 간단해서 금방 적용했다.

 

- 이렇게 두 개의 화면이 하나의 화면에서 탭으로 분리되어 나타났다.