[WE'SH] Tab navigation 구현

#1 Tab navigation 설치하기

tab-navigation을 구현하기 위해서는
@react-navigation/bottom-tabs를 설치해야한다.

npm

npm install @react-navigation/bottom-tabs

Yarn

yarn add @react-navigation/bottom-tabs

#2 Tab navigation 생성하기

import * as React from "react";
import styled from "styled-components";
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';

function HomeScreen() {
  return(
    <ScreenContainer>
      <ScreenText>Home Screen</ScreenText>
    </ScreenContainer>
  );
}

function AlbumScreen() {
  return(
    <ScreenContainer>
      <ScreenText>Album Screen</ScreenText>
    </ScreenContainer>
  );
}

const Tab = createBottomTabNavigator();

function WeshBottomTab() {
  return(
    <Tab.Navigator
    tabBarOptions={{
      activeTintColor: '#e85433',
    }}
    >
      <Tab.Screen 
      name="home"
      component={HomeScreen}
      options={{
        tabBarLabel: "Home",
        tabBarIcon: ({color, size}) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
      />
      <Tab.Screen 
      name="album"
      component={AlbumScreen}
      options={{
        tabBarLabel: "Album",
        tabBarIcon: ({color, size}) => (
          <Ionicons name="ios-albums" color={color} size={size}  />
        ),
      }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
   <NavigationContainer>
     <WeshBottomTab />
   </NavigationContainer>
  );
}

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

const ScreenText = styled.Text`
  font-size: 30px;
  font-weight: 500;
  margin: 5px;
`;

tabBarOptions중에 activeTintColor는 활성될 때의 색상을 의미한다.

Tab.Screen 태그 안에
name을 적고, 원하는 component를 넣는다.

options안에 tabBarLabel은 하단 탭에 보여지는 이름이고,
tabBaricon은 하단 탭에 보여지는 아이콘이다.

styled-components로 스타일링 해주었다.