[React Native]react-navigation/bottom-tabs

하단 탭 내비게이터 라이브러리 설치

npm install @react-navigation/bottom-tabs

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

const Tab = createBottomTabNavigator();

import Home from '../screens/Home';
import Profile from '../screens/Profile';

const App = ({navigation}) => {
  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
};

export default App;

이렇게 사용하면 되고 네이티브 스택 내비게이터와 하단 탭 내비게이터를 같이 사용하고 싶으면

하단 내비를 컴포넌트화 한 이후 App.js 에 넣어주면 된다.

App.js

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
.
.
생략
.
.
const App = () => {
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Main"
            component={BottomTabNav} //BottomTabNav.js 컴포넌트해주고 넣기
            options={{headerShown: false}} 
						//만약 위의 {headerShown: false}  값을 설정해주지 않는다면 두 개의 헤더가 나타나는 문제가 발생하여
						// 하단 탭 내비게이터를 네이티브 스택 내비게이터 내부에서 사용할 때 이 설정을 해주는 것이 중요!
          />
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Calendars" component={Calendars} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

스타일 넣기! 참고 :

Create custom bottom tab navigator in React native

const customTabBarStyle = {
    activeTintColor: '#0091EA',
    inactiveTintColor: 'gray',
    style: {backgroundColor: 'white' },
}
return (
    <Tab.Navigator
    initialRouteName="Home"
    activeColor="#fff"
    tabBarOptions={customTabBarStyle}
    shifting="false">
    <Tab.Screen
    name="Home"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
        )
    }}
    component={HomeScreen} />
    <Tab.Screen
    name="Workout"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="fitness-center" color={color} size={26} />
        )
    }}
    component={WorkoutTabScreen} />
    <Tab.Screen
    name="Add"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <View
            style={{
                position: 'absolute',
                bottom: 0, // space from bottombar
                height: 68,
                width: 68,
                borderRadius: 68,
                justifyContent: 'center',
                alignItems: 'center',
            }}
            >
            <Icon name="add-circle-outline" color="grey" size={68}/>
            </View>
        )
    }}
    component={PayScreenComponent}/>
    <Tab.Screen
    name="Store"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="store" color={color} size={26} />
        )
    }}
    component={StoreLandingScreen} />
    <Tab.Screen
    name="Profile"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="perm-identity" color={color} size={26} />
        )
    }}
    component={ProfileScreen} />
    </Tab.Navigator>
);