RN: BottomTabNavigator 만들기

BottomTabNavigator를 사용하려면 패키치 몇개를 설치해야한다.

 

npm install @react-navigation/bottom-tabs

이것만 설치를 하면 앱을 실행했을 때 오류가 난다. 

npm install react-native-screens
npm install react-native-safe-area-context

 위 두개도 같이 설치해준다.

+ ios는 추가로 ios 폴더로 들어가서 pod install 해주기

 

<BottomTabNav.tsx>

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Free from '../pages/Free';
import Search from '../pages/Search';
import Main from '../pages/Main';
import ChattingList from '../pages/ChattingList';
import Mypage from '../pages/Mypage';
const Tab=createBottomTabNavigator();
const BottomTabNav = () => {
    return (
        <Tab.Navigator
            initialRouteName='Main'
        >
            <Tab.Screen name='Free' component={Free}/>
            <Tab.Screen name='Search' component={Search}/>
            <Tab.Screen name='Main' component={Main}/>
            <Tab.Screen name='Chatting' component={ChattingList}/>
            <Tab.Screen name='Mypage' component={Mypage}/>
        </Tab.Navigator>
    );
};

export default BottomTabNav;

 

<App.tsx>

import React from 'react';
import BottomTabNav from './src/navigations/BottomTabNav';
import { NavigationContainer } from '@react-navigation/native';

function App(): React.JSX.Element {

  return (
    <NavigationContainer>
      <BottomTabNav/>
    </NavigationContainer>
  );
}


export default App;

 

주의할점은 꼭 NavigationContainer 안에 BottomTabNav를 넣어줘야 실행된다.