Drawer Navigator 등록 방법

화면에서 햄버거 메뉴 버튼을 누를 시 좌측 또는 우측 사이드바가 나오는 화면을 만들고 싶을 땐 Drawer Navigator를 사용하면 됩니다.

 

1. 설치

yarn add @react-navigation/drawer

 

2. 등록

여기서 기존의 Bottom Navigator를 등록하는 방식에서 약간의 차이점이 발생합니다.

기존엔 <NavigationContainer>안에 <Bottom.Navigator>를 등록하는 방식이였다면, <Bottom.Navigator>가 등록되기 전에 <Drawer.Navigator>가 먼저 등록되고 그 다음 <Bottom.Navigator>를 등록하는 방식으로 변경이 되어야 합니다.

 

before : NavigationContainer > Bottom.Navigator > Bottom.Screen

after : NavigationContainer > Drawer.Navigator > Drawer.Screen > Bottom.Navigator > Bottom.Screen

 

// RootNavigation.tsx
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';

const RootNavigation = () => {
  const Drawer = createDrawerNavigator();
  
  return (
    <NavigationContainer>
      <Drawer.Navigator
        backBehavior="history"
        screenOptions={{
          headerShown: false,
          // 우측에서 나오게 하고 싶으면 right
          drawerPosition: 'left',
        }}
        // 사이드바 메뉴 컴포넌트
        drawerContent={props => <Menu {...props} />}>
        <Drawer.Screen name="NOTE" component={StackNavigation} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
};

// StackNavigation.tsx
import {createStackNavigator} from '@react-navigation/stack';

const StackNavigation = () => {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name={AllScreenList.BottomTabs}
        component={BottomNavigation}
        options={{headerShown: false}}
      />
      {/* ...사이드바에 추가될 Screen */}
    </Stack.Navigator>
  );
};

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

const BottomNavigation = () => {
  const Bottom = createBottomTabNavigator();
  
  return (
    <Bottom.Navigator
      backBehavior="history"
      screenOptions={{...}}>
      <Bottom.Screen ... />
    </Bottom.Navigator>
  )
};