[React Native] 탭 구현하기

 

이 글은 여기를 참고하여 작성되었습니다.

 

 

지난번 버튼을 눌러 화면을 이동하는 법에 이어 탭을 구현해 보았습니다.

 

 

React Native에서 탭 자체는 createBottomTabNavigator를 이용하여 만든 후

createAppContainer에 생성한 TabNavigator를 담아 export 하는 방식으로 만든다

 

 

App.js

import {createAppContainer} from 'react-navigation';
import React from 'react';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Mypage from './Mypage';
import Mainpage from './Mainpage';
import Searchpage from './Searchpage';

const TabNavigator = createBottomTabNavigator({
  Mainpage: {
    screen: Mainpage,
    color:'#f08080',
  },
  Searchpage: {
    screen: Searchpage,
  },
  Mypage: {
    screen: Mypage,
  },
},
{
  defaultNavigationOptions: ({navigation}) => ({
    tabBarIcon: ({horizontal}) => {
      const {routeName} = navigation.state;
      let iconName;
      if (routeName === 'Mypage') {
        iconName = 'ios-person';
      } else if (routeName === 'Mainpage') {
        iconName = 'ios-book';
      }else if (routeName === 'Searchpage') {
        iconName = 'ios-search';
      }
      return (
        <Ionicons
          name={iconName}
          size={horizontal ? 28 : 35}
          color='#00bfff'
        />
      );
    },
    tabBarOptions: {
      style: {height:60},
      color:"#f08080",
    }
  }),
},
);
export default createAppContainer(TabNavigator);

 

클릭된 routeName에 맞게 icon과 색상을 설정해주면 아래 화면같이 나타난다.