머티리얼 상단 탭 내비게이터(Material Top Tab Navigator) 사용하기

머티리얼 상단 탭 내비게이터(Material Top Tab Navigator) 설정 및 사용법

머티리얼 상단 탭 내비게이터(Material Top Tab Navigator)는 하단 탭 내비게이터와 유사하다.

이 내비게이터는 탭을 상단에 위치시킬 수 있고, 탭을 누르면 구글의 머터리얼 디자인 특유의 물결(ripple) 효과가 나타난다.

화면을 스와이프하는 형태로 우측/좌측 탭으로 전환할 수도 있다.

머티리얼 상단 탭 내이게이터를 사용하려면 아래 명령어를 통해 라이브러리를 설치해야 한다.

$ yarn add @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view 
$ cd ios
$ pod install
$ cd ..
$ yarn ios
$ yarn android

react-native-tab-view는 리액트 네이티브에서 탭을 구현할 수 있게 하는 라이브러리이고, react-navigation에 종속되지 않는 라이브러리이기 때문에 다른 내비게이션 관련 라이브러리와 함께 사용할 수도 있다.

 

사용 예제 코드

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

const Tab = createMaterialTopTabNavigator();

function MainScreen() {
  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarIcon: ({color}) => (
            <Icon name="notifications" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Notification"
        component={NotificationScreen}
        options={{
          tabBarIcon: ({color}) => (
            <Icon name="search" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Message"
        component={MessageScreen}
        options={{
          tabBarIcon: ({color}) => (
            <Icon name="message" color={color} size={24} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}
function HomeScreen({navigation}) {
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="상세보기"
        onPress={() => navigation.push('Detail', {id: 1})}
      />
    </View>
  );
}

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

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

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

export default MainScreen;

참고로 머터리얼 물결 효과는 안드로이드 5.0 이상에서만 나타나고 iOS에서는 이 효과가 없다.

 

머티리얼 상단 탭 커스터마이징

Tab.Navigator 컴포넌트에는 screenOptions Props와 Tab.Screen 컴포넌트에는 options Props를 지정해줄 수 있다.

<Tab.Navigator
  initialRouteName="Home"
  screenOptions={{
  tabBarIndicatorStyle: '#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="notifications" color={color} size={24} />
        ),
      }}/>
    <Tab.Screen
      name="Notification"
      component={NotificationScreen}
      options={{
        tabBarLabel: '알림',
        tabBarIcon: ({color}) => (
          <Icon name="search" color={color} size={24} />
        ),
      }}/>
    <Tab.Screen
      name="Message"
      component={MessageScreen}
      options={{
        tabBarLabel: '메시지',
        tabBarIcon: ({color}) => (
          <Icon name="message" color={color} size={24} />
        ),
      }}/>
</Tab.Navigator>

Tab.Navigator Props

• initialRouteName : 초기 화면의 이름
• screenOptions : 화면의 기본 설정, 하단 탭 내비게이션과 비슷한데, 다음과 같은 추가 옵션이 있다.
  - swipeEnabled : 화면을 좌우로 스와이프하여 전환 설정(default : true)
  - lazy : 특정 탭으로 이동해야만 해당 탭을 렌더링 하도록 설정
  - lazyPreloadDistance : lazy 속성이 활성화된 상태에서 몇 칸 뒤 화면을 미리 불러올지 설정(default : 0)
  - lazyPlaceholder : lazy 속성이 활성화되어 있을 때 아직 보이지 않은 화면에서 보여줄 대체 컴포넌트
  - tabBarIndicator : 활성화된 탭을 표시하는 컴포넌트
  - tabBarIndicatorStyle : 활성화된 탭을 표시하는 컴포넌트의 스타일
• backBehavior : 뒤로가기할 때의 작동 방식
• tabBarPosition : 탭 바의 위치(top 또는 bottom)
• keyboardDismissMode : 키보드를 숨기는 설정
  - auto : 기본값. 화면이 바뀔 때 키보드를 숨김
  - on-drag : 화면을 드래그할 때 키보드를 숨김
  - none : 드래그해도 키보드를 숨기지 않는다.
• sceneContainerStyle : 각 화며에 대한 스타일
• style : 전체 캡 뷰에 대한 스타일
• tabBar : 탭 바를 대체할 수 있는 컴포넌트(공식 메뉴얼 참조)

Tab.Screen Props

• tabBarIcon : 아이콘을 보여주는 함수, { focused: boolean, color: string } 타입의 파라미터를 받아온다.
• tabBarLabel : 탭에서 보이는 이름

 

 

더욱 자세한 내용은 공식 메뉴얼을 참고 바란다.

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