[react-native] Bottom tab navigator

  요즘 가장 많이 보이는 Bottom tab navigator이다. 

 

바로 시작해보자.

---

우선, 동일하게 라이브러리를 설치해주고

yarn add @react-navigation/bottom-tabs@next

 

Vector 아이콘 사용을 위한 라이브러리 설치와 셋팅도 진행해주자.

yarn add react-native-vector-icons

 

◎android/app/build.gradle 최하단

(...)

project.ext.vectoricons = [
	ionFontNames: ['MaterialIcons.ttf']
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

 

◎ios/프로젝트 이름/Info.plist 최하단

(....)
<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
	<key>UIAppFonts</key>
	<array>
		<string>MaterialIcons</string>
	</array>

 

Bottom tab navigator의 기본적인 구조는 아래와 같다.

 

◎ App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Button, SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return <Text>Home</Text>;
};

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

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

const MessageScreen = () => {
  return <Text>Message</Text>;
};
const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName={'Home'}>
        <Tab.Screen name={'Home'} component={HomeScreen} />
        <Tab.Screen name={'Search'} component={SearchScreen} />
        <Tab.Screen name={'Notification'} component={NotificationScreen} />
        <Tab.Screen name={'Message'} component={MessageScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

여기에 options 옵션을 사용하여 아이콘과 타이틀을 넣어준다.

 

◎ App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Button, SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return <Text>Home</Text>;
};

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

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

const MessageScreen = () => {
  return <Text>Message</Text>;
};
const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName={'Home'}>
        <Tab.Screen
          name={'Home'}
          component={HomeScreen}
          options={{
            title: '홈',
            tabBarIcon: ({color, size}) => (
              <Icon name={'home'} color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name={'Search'}
          component={SearchScreen}
          options={{
            title: '검색',
            tabBarIcon: ({color, size}) => (
              <Icon name={'search'} color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name={'Notification'}
          component={NotificationScreen}
          options={{
            title: '알림',
            tabBarIcon: ({color, size}) => (
              <Icon name={'notifications'} color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name={'Message'}
          component={MessageScreen}
          options={{
            title: '메시지',
            tabBarIcon: ({color, size}) => (
              <Icon name={'message'} color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

그 밖에도 Tab.Navigator 컴포넌트에 디자인 설정을 따로 추가하여 커스터마이징도 가능하다.

 

◎ App.js

 <NavigationContainer>
      <Tab.Navigator
        initialRouteName={'Home'}
        tabBarOptions={{activeTintColor: '#fb8c00', showLabel: false}}>

 

탭에 관한 자세한 설정은 https://reactnavigation.org/docs/7.x/bottom-tab-navigator 에서 확인할 수 있다.

 

 

끝!