Tab-Navigation 설치하기

하단에 탭메뉴를 생성할 수 있는 라이브러리가 있었다.
그게 바로 @react-navigation/bottom-tabs
설치를 해서 사용해보기로 했다.

참고하였습니당 :)
http://www.devh.kr/2020/React-Navigation-Tab-navigation/

📌 구조파악

예제를 참고해서 코드를 작성하다가보니, 코드 양이 많아지긴 했는데
아직 필수로 필요한 구조를 몰라서 그런 것 같기도 하다ㅠㅠ
우선은 만들어내는것을 목적으로 하는 중이니까
이런게 필요한거구나- 라고 생각하고 넘어가기로 했다.
더 공부하면서 코드를 줄이는 방법에 대해서도 고민해봐야지 :)

우선 전체적인 구조는, 기존에 내가 짰었던 구조에서
가장 중심이 되는 App.js가 export되는 부분에서
Stack을 Tab으로 바꾸는게 제일 큰 것 같다.

import { createStackNavigator } from '@react-navigation/Stack'
import { createBottomTabNavigator } from 
'@react-navigation/bottom-tabs';
import MainScreen from './components/Main';
import AlbumScreen from './components/Album';
...

const MainStack = createStackNavigator();
function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Main" component={MainScreen}/>
    </MainStack.Navigator>
  );
}

const AlbumStack = createStackNavigator();
function AlbumStackScreen(){
  return (
    <AlbumStack.Navigator>
      <AlbumStack.Screen name="Album" component={AlbumScreen} />
    </AlbumStack.Navigator>
  );
}

...

const Tab = createBottomTabNavigator();

export default function App() {
  return (
   <NavigationContainer>
    <Tab.Navigator>
     <Tab.Screen name="Main" component={MainStackScreen} />
     <Tab.Screen name="Album" component={AlbumStackScreen} />
      ...
    </Tab.Navigator>
   </NavigationContainer>
  );
}

윗부분에서 내가 만들고자 하는 screen 별로 component를 만들어주는 이유는
Stack이라고 화면 상단에 screen이름을 표시해주는 영역?을
만들어주면서 구조를 잡아주는 것 같다.
그래서 스크린별로 component를 만든 후
Tab부분에는 만들어준 component를 넣어주게 되면

이렇게 하단에 Tab Navigator가 생김!!!!!

📌 탭에 아이콘 추가하기

아직도 참 많이 부족하기에... 하나하나 해내는데에 시간이 많이 걸린다ㅠㅠ
따로 포스팅을 해야 할 만큼 리서치에도 시간이 많이 걸렸고
구현해 내는데에도 시간이 많이 걸렸지만...
해낸건 해낸거고, 포스팅에는 간략히 정리해두기!

사실 아직도 내가 다운 받은 아이콘들을 넣어보고 싶다.
하지만 이렇게 기본적인 것을 구현해내는데에도 에러사항이 많았기 때문에
우선! 기본에 충실해보고자..! 일단 기본적인 것 해보기 😅

아이콘을 넣는데에도 그냥 띡- 넣는게 아니었다.
tab을 구현해주는 코드에 아이콘을 넣기 위해 screenOptions를 사용하여
IonIcons에 있는 아이콘 넣기 작업.

<NavigationContainer>
  <Tab.Navigator
    screenOptions={({route}) => ({
     tabBarIcon: ({focused, size, color}) => {
       let iconName;
       if(route.name === "Main") {
         iconName = focused ? "ios-heart" : "ios-heart-empty";
       } else if(route.name === "Album") {
         iconName = focused ? "md-images" : "md-images";
       } else if( ... )
        ...
     return <IonIcons name={iconName} size={size} color={color} />
    }
   })}
    tabBarOptions = {{
     activeTintColor: "#ff5722",
     inactiveTintColor: "#d9c6a5",
    }}

이런식으로 클릭되었을 때 (focused) 보여질 아이콘과 그렇지 않을 때 보여질 아이콘을
따로 지정할 수 있게 삼항연산자를 사용하였다.
또한 아이콘이 활성화 되었을 때, 그렇지 않을 때의 색상도 정해주는 기능이 있는
tabBarOptions를 사용해서 색상을 지정해주었다.
그렇게 해서 결과물!

다음 포스팅에서는 메인 스크린에 이미지를 넣는 법,
상단 Stack을 스타일링 하는 법에 대해 작성해보겠다.