[React-Native] 8. Bottom Tab Navigator 사용하기

이전 포스팅 [React-Native] 4. react-navigation V5 설정하기 에서

react-navigation을 설치하고, Material Bottom Tab Navigator의 간단한 예제를 실행해보았다.

 

이번 포스팅에선 Bottom Tab Navigator을 사용해보자! (공식 문서는 여기)

예제는
styled-component, 반응형디자인([React Native] 10. 반응형 디자인 적용하기) 을 사용했습니다.

 

1. Bottom Tab Navigator를 import 해준다.

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

 

2. Bottom Tab 생성 및 커스텀

const Tab = createBottomTabNavigator();

위와 같이 Bottom Tab을 생성해준다. 그 후 적용은 아래처럼!

 

const TabNavi = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: "#7DD421",
        inactiveTintColor: "#222222",
        style: {
          height: heightPercentage(56),
          borderTopWidth: heightPercentage(0.5),
          borderTopColor: "#E9E9E9",
          backgroundColor: "#FFFFFF",
        },
        iconStyle: {
          marginTop: heightPercentage(10),
        },
        labelStyle: {
          fontFamily: "NotoSansKR-Regular",
          fontSize: fontPercentage(10),
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "홈",
          tabBarIcon: ({ focused }) =>
            focused ? (
              <ActiveHomeIcon width={widthPercentage(24)} height={heightPercentage(24)} />
            ) : (
              <InactiveHomeIcon width={widthPercentage(24)} height={heightPercentage(24)} />
            ),
        }}
      />

      <Tab.Screen
        name="Category"
        component={Category}
        options={{
          tabBarLabel: "카테고리",
          tabBarIcon: () => (
            <CategoryIcon width={widthPercentage(24)} height={heightPercentage(24)} />
          ),
        }}
      />

      <Tab.Screen
        name="Chatting"
        component={Chatting}
        options={{
          tabBarLabel: "채팅",
          tabBarIcon: ({ focused }) =>
            focused ? (
              <ActiveChatIcon width={widthPercentage(24)} height={heightPercentage(24)} />
            ) : (
              <InactiveChatIcon width={widthPercentage(24)} height={heightPercentage(24)} />
            ),
        }}
      />

      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: "프로필",
          tabBarIcon: ({ focused }) =>
            focused ? (
              <ActiveProfileIcon width={widthPercentage(24)} height={heightPercentage(24)} />
            ) : (
              <InactiveProfileIcon width={widthPercentage(24)} height={heightPercentage(24)} />
            ),
        }}
      />
    </Tab.Navigator>
  );
};

좀 길지만, 내용은 간단하다.

Tab.Navigator로 뼈대를 만들어 놓고, Tab.Screen으로 각 Tab을 지정해준다.

 

▶ 위 예제에서 쓰인 Props 및 Options 설명

• Tab.Navigator
  • tabBarOptions: 하단탭 바의 공통 속성을 지정해준다. (tintColor는 아이콘과 라벨의 색을 의미)

 

• Tab.Screen
  • name: navigation을 사용해 이동할 때 사용되는 스트링 값
  • component: 해당 탭을 눌렀을 때 보여줄 화면 component
  • tabBarLabel: 하단 탭 바에 보여줄 스트링값이며, 함수로 지정도 가능하다. 함수를 사용할 땐, { focused: boolean, color: string }가 주어진다. options에 tabBarShowLabel=false로 지정해 숨길 수 있다.
  • tabBarIcon: 하단탭 바에 보여줄 아이콘으로, { focused: boolean, color: string, size: number }가 주어지는 함수로 지정한다.

 

 이것 말고도, 다른 유용한 (backBehavior, tabBarBackgroundColor, tabBarHideOnKeyboard 등) Props와 Options이 있으니, 공식 문서를 참고하자!

 

 

3. 결과

위의 예제에서, component들은 임시로 아래처럼 작성해주었다.

(styled-component 사용)

const Placeholder = Styled.View`
  width: ${widthPercentage(360)}px;
  height: ${ScreenHeight + StatusHeight}px;
  paddingLeft: ${widthPercentage(155)}px;
  paddingTop: ${heightPercentage(360)}px;
  background-color: #FFFF11;
`;

const SomeTab = () => {
  return (
    <Placeholder>
      <Text>example</Text>
    </Placeholder>
  );
};

 

npm run android 명령을 통해 실행해보면, 아래와 같이 하단탭이 적용된 화면을 볼 수 있다.

 

다음 포스팅에선, 하단탭을 눌렀을 때 새로운 화면(하단탭이 없는)이 나타날 수 있는 방법을 알아보고자 한다.