(React-Native) Project: TabNavigator 기능 넣기

TabNavigator 기능 넣기

 

navigations 폴더에 TabNavigator.js 파일 생성

 

tool 설치: "yarn add @react-navigation/bottom-tabs"

 

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

 

아래와 같이 탭으로 만들고 싶은 페이지들을 Tab.Screen 태그 안에 넣는다.

      <Tabs.Screen name="MapPage" component={MapPage} />
      <Tabs.Screen name="FavoritesPage" component={FavoritesPage} />
      <Tabs.Screen name="MyMainPage" component={MyMainPage} />

그러면 StackNavigator.js에 있었던 위의 세가지 페이지들을 지워주고 대신 TabNavigator을 페이지화 시켜준다.

TabNavigator 자체가 하나의 페이지인 것이다.

TabNavigator 안에 MapPage, FavoritesPage, MyMainPage 가 들어있는 상태

 

Official Doc: https://reactnavigation.org/docs/bottom-tab-navigator

https://reactnative.dev/docs/image   
https://docs.expo.dev/guides/icons/    

https://icons.expo.fyi/