[react-native] Material Top Tabs Navigator

 Material Top Tabs Navigator 는 직전에 다뤘던 bottom tab navigator와 유사하지만, 탭을 상단에 위치시킬 수 있고 스와이프 제스쳐로 탭을 이동시킬 수 있다는 장점이 있다.

 

네비게이터는 지금까지 많이 다뤘으니, 바로 한번 예제 코드를 작성해보자.

---

우선, 설치부터 하자.

yarn add @react-navigation/material-top-tabs@next
yarn add react-native-pager-view

 

새 라이브러리를 설치 후에 반드시 빌드를 다시 해주자. 안그럼 제대로 동작하지 않는 경우가 많다.

 

직전 포스팅에서 작성했던 MainScreen.js에서 bottom-tab이 아닌 Material Top Tabs Navigator 을 사용하도록 수정한다.

 

◎ MainScreen.js

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {Text, View, Button} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createMaterialTopTabNavigator();

function HomeScreen({navigation}) {
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="Detail 1 열기"
        onPress={() =>
          navigation.push('Detail', {
            id: 1,
          })
        }
      />
    </View>
  );
}

function SearchScreen() {
  return (
    <View>
      <Text>Search</Text>
    </View>
  );
}

function NotificationScreen() {
  return (
    <View>
      <Text>Notification</Text>
    </View>
  );
}

function MessageScreen() {
  return (
    <View>
      <Text>Message</Text>
    </View>
  );
}

function MainScreen() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarIndicatorStyle: {
          backgroundColor: '#009688',
        },
        tabBarActiveTintColor: '#009688',
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: '홈',
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarLabel: '검색',
          tabBarIcon: ({color}) => (
            <Icon name="search" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Notification"
        component={NotificationScreen}
        options={{
          tabBarLabel: '알림',
          tabBarIcon: ({color}) => (
            <Icon name="notifications" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Message"
        component={MessageScreen}
        options={{
          tabBarLabel: '메시지',
          tabBarIcon: ({color}) => (
            <Icon name="message" color={color} size={24} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default MainScreen;

 

기본적인 구성이 Bottom-tab 과 크게 다르지 않아서, 어렵지 않게 사용할 수 있다.

 

◎ App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import MainScreen from './screens/MainScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={MainScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

---

Material Bottom Tabs Navigator

동일하게 동작하는 Bottom Tab 네비게이터도 존재한다.

 

그러나 material bottom tabs 는 7.x 버전에서는 따로 업데이트가 안된건지 존재하지 않는데, 

 

https://reactnavigation.org/docs/7.x/material-top-tab-navigator를 확인해보면, Tab.Navigator의 속성으로 tabBarPosition을 사용하여 변경하면 된다. (default='top')

Material Top Tabs Navigator | React Navigation