[ React Native ] react-navigation bottom-tabs

앱개발을 하면 하단의 네비게이션이 거의 필수이기에

bottom-tabs 패키지를 사용하여 bottom navigation기능을 구현

---

Initialized

bottom-tabs를 사용할때는 react-native-screens를 같이 설치해줘야한다.

그렇지 않으면 계속 react native에서 해당 스크린을 찾을 수 없다고 계속 에러가 발생하게 된다.

 

npm install react-native-screens @react-navigation/bottom-tabs

---

Useage

우선 전역으로 bottom navigation을 적용할 것이므로 app.tsx 파일에 NavigationContainer를 만들어준다.

import {
  SafeAreaProvider,
} from 'react-native-safe-area-context';
import {NavigationContainer} from "@react-navigation/native";
import BottomNavigation from "@/navigation";

function App() {
  return (
    <SafeAreaProvider>
        <NavigationContainer>
            <BottomNavigation/>
        </NavigationContainer>
    </SafeAreaProvider>
  );
}

export default App;

 

이후 bottomNavigation을 컴포넌트로 만들어서 사용했다.

bottom navigation에는 stack이나 다른 방법도 있지만 기본으로 사용할 것이므로 기본 screen으로 사용

 

initalRouteName을 설정하여 처음에 선택할 탭을 설정

이후 이전에 만들었던 SvgIcon 컴포넌트를 활용하여 아이콘을 만들어 주었다.

 

또한 bottom Navigation에는 타이틀이 거의 없고 아이콘만 사용하기에 tabBarShowLabel false로 설정

각 탭별로 헤더를 만들어주는데 우선 헤더는 직접 커스텀 하거나 안쓸것 같아서 headerShown도 false로 설정

 

import * as React from 'react';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import {HomeScreen, MetricScreen, SettingScreen} from "@/screens";
import {SvgIcon} from "@/components";


const Tab = createBottomTabNavigator();

const BottomNavigation = () => {
    return (
        <Tab.Navigator
            initialRouteName="Metric"
            screenOptions={{
                tabBarIcon: ({focused, color, size}) => {
                    console.log(focused, color, size);
                  return <SvgIcon name="CheckBoard" size={size * 0.8} color={color}/>;
                },
                // tabBarLabelStyle: {
                //     fontSize: 10,
                //     fontWeight: '600',
                // },
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
                headerShown: false,
                tabBarShowLabel: false,
            }}

        >
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Metric" component={MetricScreen} />
            <Tab.Screen name="Settings" component={SettingScreen} />

        </Tab.Navigator>
    )
}

export default BottomNavigation

 

그럼 아래 navigation이 설정한 아이콘대로 화면이 나오게 된다.