드로어 네비게이션

탐색에서 일반적인 패턴은 화면 간 이동을 위해 왼쪽(때로는 오른쪽) 측면에서 드로어를 사용하는 것이다.

계속하기 전에 먼저 @react-navigation/drawer 와 그 종속성을 지시에 따라 설치해야 한다.

드로어 기반 탐색 기본 예제

드로어 내비게이터를 사용하려면 @react-navigation/drawer 에서 import한다:

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

드로어 열기와 닫기​

드로어를 열고 닫으려면 다음 헬퍼를 사용한다:

navigation.openDrawer();
navigation.closeDrawer();

드로어를 토글하려면 다음과 같이 호출한다:

navigation.toggleDrawer();

이 함수들은 내부적으로 액션을 디스패치한다:

navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

드로어가 열려 있는지 닫혀 있는지 다음과 같이 확인 할 수 있다:

import { useDrawerStatus } from '@react-navigation/drawer';

// ...

const isDrawerOpen = useDrawerStatus() === 'open';