처음 배우는 리액트 네이티브 - 김범준

8장 내비게이션

8.3 탭 내비게이션

탭 내비게이션은 보통 화면 위나 아래에 위치
탭 버튼을 누르면 버튼과 연결된 화면으로 이동하는 방식
다음 명령어로 추가 라이브러리 설치

npm install @react-navigation/bottom-tabs

8.3.1 화면 구성

src/screens/TabScreens.js

import React from "react";
import styled from 'styled-components/native';

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const StyledText = styled.Text`
    font-size: 30px;
`;

export const Mail = () => {
    return (
        <Container>
            <StyledText>Mail</StyledText>
        </Container>
    );
};

export const Meet = () => {
    return (
        <Container>
            <StyledText>Meet</StyledText>
        </Container>
    );
};

export const Settings = () => {
    return (
        <Container>
            <StyledText>Settings</StyledText>
        </Container>
    );

};

src/navigations/Tab.js

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Mail, Meet, Settings } from "../screens/TabScreens";

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Mail" component={Mail} />
            <Tab.Screen name="Meet" component={Meet} />
            <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
    );
};

export default TabNavigation;

createBottomTabNavigator()를 이용해 탭 내비게이션 생성
Navigator 컴포넌트, Screen 컴포넌트가 있음

App.js 에 추가

탭 바 순서 변경하고 싶으면 initialRouteName 속성 이용

8.3.2 탭 바 수정하기

버튼 아이콘 설정
버튼 아이콘 렌더링: tabBarIcon 이용. color, size, focused 값을 포함한 객체가 파라미터로 전달됨

...
import { MaterialCommunityIcons } from '@expo/vector-icons';

const TabIcon = ({ name, size, color }) => {
    return <MaterialCommunityIcons name={name} size={size} color={color} />
}

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen 
            name="Mail" 
            component={Mail}
            options={{
                tabBarIcon: props => TabIcon({ ...props, name: 'email'}),
            }} 
            />
            <Tab.Screen 
            name="Meet" 
            component={Meet}
            options={{
                tabBarIcon: props => TabIcon({ ...props, name: 'video'}),
            }} 
            />
            <Tab.Screen 
            name="Settings" 
            component={Settings} 
            options={{
                tabBarIcon: props => TabIcon({ ...props, name: 'cog'}),
            }}
            />
        </Tab.Navigator>
    );
};
...

Screen 컴포넌트마다 tabBarIcon에 MaterialCommunityIcons 컴포넌트를 반환하는 함수를 지정함

Screen 컴포넌트마다 아이콘을 지정하지 않고 한 곳에서 몸든 버튼의 아이콘을 관리하고 싶을 경우 Navigator 컴포넌트의 screenOprions 속성을 사용해서 관리

라벨 수정
tabBarLabel을 이용해서 변경가능
라벨을 아이콘 옆에 렌더링하고 싶으면 tabBarOptions의 labelPosition의 값을 변경해서 조정 가능

tabBarOptions={{ labelPosition: 'beside-icon' }}

라벨을 렌더링 하지 않고 아이콘만 사용하는 경우 showLabel을 사용

tabBarOptions={{ labelPosition: 'beside-icon', showLabel: false }}

스타일 수정

탭 바 배경색은 흰색이 기본값
tabBarOptions의 style의 값으로 스타일 객체를 설정하여 조정 가능

tabBarOptions={{ 
               labelPosition: 'beside-icon', 
               showLabel: false,
               style: {
               	backgroundColor: '#54b7f9',
                borderTopColor: '#fff',
               	borderTopWidth: 2,
              }
              }}

아이콘 색상 변경
선택되어 활성화 상태의 색: activeTintColor
선택되지 않은 비활성화 상태의 색: inactiveTintColor

tabBarOptions={{ 
               labelPosition: 'beside-icon', 
               showLabel: false,
               style: {
               	backgroundColor: '#54b7f9',
                borderTopColor: '#fff',
               	borderTopWidth: 2,
              },
  				activeTintColor: '#fff',
                inactiveTintColor: '#0b92e9',
              }}

focused 상태에 따라 다른 아이콘 렌더링

...
const TabNavigation = () => {
    return (
			...
            <Tab.Screen 
            name="Meet" 
            component={Meet}
            options={{
                tabBarIcon: props => 
                     TabIcon({
                     ...props,
                     name: props.focuesd ? 'video' : 'vidieo-outline',
                    }),
            }} 
			...
    );
};
...

+) 드로어 내비게이션: 메뉴를 감춰서 공간을 절약