createMaterialTopTabNavigator

• https://reactnavigation.org/docs/material-top-tab-navigator

설치

# 설치 안했다면 우선 설치
$ npm install react-native-pager-view

$ yarn add @react-navigation/material-top-tabs react-native-tab-view@^2.16.0

or 

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

예시 코드

import React from 'react';
import { View, Text } from 'react-native';

//Tab Navigatior
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();

const Test1 = () => {
    return (
        <View style={{flex:1, backgroundColor:'black'}}>
            <Text>hi</Text>
        </View>
    );
}

const Test2 = () => {
    return (
        <View style={{flex:1, backgroundColor:'black'}}>
            <Text>hi 2</Text>
        </View>
    );
}

export default function LectureDetailTabNav() {
    return (
        <View style={{flex:1, backgroundColor:'blue'}}>
        <Tab.Navigator>
            <Tab.Screen name="Test1" component={Test1} />
            <Tab.Screen name="Test2" component={Test2} />
        </Tab.Navigator>
        </View>
    );
}