Navigation (3) : Tab

공식문서 : https://reactnavigation.org/docs/5.x/bottom-tab-navigator

설치 : 공식문서상의 npm install @react-navigation/bottom-tabs@^5.x 로 1차 시도 하였으나 오류발생

그래서 npm install @react-navigation/bottom-tabs 로 진행

기본 구성

A. 3개의 screens을 구성한다.

// src/screens/Tabscreens.tsx

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

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

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

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

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

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

B. navigator 및 screens 구성을 한다.

// src/navigation/Tab.jsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mall, Profile, Settings } from '../screens/index';

const Tab = createBottomTabNavigator();

const TabNav = () => {
  return (
    <Tab.Navigator initialRouteName="Settings">
      <Tab.Screen name="Mall" component={Mall} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

export default TabNav;

C. Container 구성을 한다.

// src/navigation/index.tsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNav from './Stack';
import TabNav from './Tab';

const Navigation = () => {
  return (
    <NavigationContainer>
      {/* <StackNav /> */}
      <TabNav />
    </NavigationContainer>
  );
};

export default Navigation;

하단 버튼 순서 및 초기 화면

• initialRouteName
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#initialroutename

• Screen 컴포넌트 순서에 따라 하단 버튼 순서가 정해진다.

• 초기화면은 Screen 컴포넌트 순서에 관계없이 initialRouteName 속성으로 정해진다.

// src/navigation/Tab.jsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mall, Profile, Settings } from '../screens/index';

const Tab = createBottomTabNavigator();

const TabNav = () => {
  return (
    <Tab.Navigator initialRouteName="Settings">
      <Tab.Screen name="Mall" component={Mall} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

export default TabNav;

하단 버튼 아이콘

• tabBarIcon
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#options
  props 로 {focused, size, color} 가 넘어온다.

// src/navigation/Tab.jsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mall, Profile, Settings } from '../screens/index';
import { MaterialIcons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

const TabNav = () => {
  return (
    <Tab.Navigator initialRouteName="Mall">
      <Tab.Screen
        name="Mall"
        component={Mall}
        options={{
          tabBarIcon: ({ size, color }) => {  // ⭐️⭐️⭐️⭐️
            return <MaterialIcons name="mail" size={size} color={color} />;
          },
        }}
      />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

export default TabNav;

• Profile, Setting 까지 다하면 너무 반복코드이니 함수처리하자

// src/navigation/Tab.jsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mall, Profile, Settings } from '../screens/index';
import { MaterialIcons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

const TabIcon = ({ name, size, color }) => {
  return <MaterialIcons name={name} size={size} color={color} />;
}; // ⭐️⭐️⭐️⭐️

const TabNav = () => {
  return (
    <Tab.Navigator initialRouteName="Mall">
      <Tab.Screen
        name="Mall"
        component={Mall}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'mail' }); // ⭐️⭐️⭐️⭐️
          },
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'person' });
          },
        }}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'settings' });
          },
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNav;

탭바 텍스트 수정

• 텍스트 내용 수정
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#tabbarlabel

• 텍스트 숨김
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#showlabel

// src/navigation/Tab.jsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mall, Profile, Settings } from '../screens/index';
import { MaterialIcons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

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

const TabNav = () => {
  return (
    // 공식 문서 적용 ⭐️⭐️⭐️⭐️
    // <Tab.Navigator initialRouteName="Mall" tabBarOptions={{ showLabel: false }}>
    // 오류 코드 보고 수정 ⭐️⭐️⭐️⭐️
    <Tab.Navigator
      initialRouteName="Mall"
      screenOptions={{ tabBarShowLabel: false }}
    >
      <Tab.Screen
        name="Mall"
        component={Mall}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'mail' });
          },
          tabBarLabel: 'InBox', // ⭐️⭐️⭐️⭐️ 표시되는 텍스트 기본값 : 상기 속성인 name
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'person' });
          },
        }}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'settings' });
          },
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNav;

탭바 텍스트 옆으로 보이기, 색상 등

• labelPosition
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#labelposition

• style
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#style

• activeTintColor, inActiveTintColor
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#activetintcolor

• tabBarIcon
  https://reactnavigation.org/docs/5.x/bottom-tab-navigator#options
  props 로 {focused, size, color} 가 넘어온다.
  이중 focused를 활용하여 선택 또는 미선택시 아이콘 교체

// src/navigation/Tab.jsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mall, Profile, Settings } from '../screens/index';
import { MaterialIcons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

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

const TabNav = () => {
  return (
    // 공식 문서 적용
    // <Tab.Navigator initialRouteName="Mall" tabBarOptions={{ showLabel: false }}>
    // 오류 코드 보고 수정
    <Tab.Navigator
      initialRouteName="Mall"
      screenOptions={{
        tabBarShowLabel: true,
        tabBarLabelPosition: 'beside-icon', // ⭐️⭐️⭐️⭐️
        tabBarStyle: { // ⭐️⭐️⭐️⭐️
          backgroundColor: '#0f56b3',
          borderTopColor: '#ffffff',
          borderTopWidth: 1,
        },
        tabBarActiveTintColor: '#ffffff', // ⭐️⭐️⭐️⭐️
        tabBarInactiveTintColor: '#5096f1', // ⭐️⭐️⭐️⭐️
      }}
    >
      <Tab.Screen
        name="Mall"
        component={Mall}
        options={{
          tabBarIcon: props => {
            return TabIcon({
              ...props,
              name: props.focused ? 'mail' : 'mail-outline', // ⭐️⭐️⭐️⭐️
            });
          },
          tabBarLabel: 'InBox', // 표시되는 텍스트 기본값 : 상기 속성인 name
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'person' });
          },
        }}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{
          tabBarIcon: props => {
            return TabIcon({ ...props, name: 'settings' });
          },
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNav;