[React Native] #5 Bottom Tabs 에 Icon 추가

본 게시글에서는 Bottom Tabs에 label 대신 icon 으로 변경 하도록 한다.

 

1. 다양한 icon을 사용할 수 있는 @expo/vector-icons module 추가

yarn add @expo/vector-icons

 

2. Tab navigation 의 options 값으로 icon 추가

* 참고 : https://reactnavigation.org/docs/tab-based-navigation/

* icon 종류 : https://icons.expo.fyi/

* icon 종류에 따라 import 해야 되는 component 가 다르므로 각각 확인 할 것 (Ionicons, MaterialCommunityIcons 등)

 

# router > index.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

//stacks
import HomeStack from "router/Home/index";
import MapStack from "router/Map/index";
import WeatherDataStack from "router/WeatherData/index";
import SettingStack from "router/Setting/index";

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

const Tab = createBottomTabNavigator();

const Root = ({ navigation }) => {
    return (
        <Tab.Navigator>
            <Tab.Screen
                name="HomeStack"
                component={HomeStack}
                options={{
                    tabBarIcon: () => (
                        <Ionicons
                            name="ios-home"
                            size={30}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="MapStack"
                component={MapStack}
                options={{
                    tabBarIcon: () => (
                        <Ionicons
                            name="ios-location"
                            size={30}
                        />
                    ),
                }}

            />
            <Tab.Screen
                name="WeatherDataStack"
                component={WeatherDataStack}
                options={{
                    tabBarIcon: () => (
                        <MaterialCommunityIcons
                            name="weather-partly-rainy"
                            size={30}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="SettingStack"
                component={SettingStack}
                options={{
                    tabBarIcon: () => (
                        <Ionicons
                            name="ios-settings"
                            size={30}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
}


export default function index() {
    return (
        <NavigationContainer>
            <Root />
        </NavigationContainer>
    );
};

 

* iOS / Android 모두 정상적으로 display 됨

< iOS / Android >

 

3. Bottom Tabs 의 label 삭제 및 icon 클릭 시 색상 변경 

 

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

//stacks
import HomeStack from "router/Home/index";
import MapStack from "router/Map/index";
import WeatherDataStack from "router/WeatherData/index";
import SettingStack from "router/Setting/index";

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

const Tab = createBottomTabNavigator();

const Root = ({ navigation }) => {
    return (
        <Tab.Navigator
            tabBarOptions={{
                showLabel: false,
            }}
        >
            <Tab.Screen
                name="HomeStack"
                component={HomeStack}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Ionicons
                            name="ios-home"
                            style={{ color: focused ? "#00B386" : "#404040" }}
                            size={30}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="MapStack"
                component={MapStack}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Ionicons
                            name="ios-location"
                            style={{ color: focused ? "#00B386" : "#404040" }}
                            size={30}
                        />
                    ),
                }}

            />
            <Tab.Screen
                name="WeatherDataStack"
                component={WeatherDataStack}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <MaterialCommunityIcons
                            name="weather-partly-rainy"
                            style={{ color: focused ? "#00B386" : "#404040" }}
                            size={30}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="SettingStack"
                component={SettingStack}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Ionicons
                            name="ios-settings"
                            style={{ color: focused ? "#00B386" : "#404040" }}
                            size={30}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
}


export default function index() {
    return (
        <NavigationContainer>
            <Root />
        </NavigationContainer>
    );
};

< iOS / Android >

 

끝.