Skip to main content

플랫폼의 DrawerLayout을 감싸는 React 컴포넌트(Android 전용). Drawer(주로 네비게이션에 사용)는 renderNavigationView로 렌더링되며, 직접적인 자식들은 메인 뷰(콘텐츠가 위치하는 곳)가 된다. 네비게이션 뷰는 처음에는 화면에 보이지 않지만, drawerPosition prop으로 지정된 윈도우 측면에서 끌어올 수 있고, drawerWidth prop으로 너비를 설정할 수 있다.

참조

Props​

View Props​

View Props를 상속한다.

drawerBackgroundColor​

드로어의 배경색을 지정한다. 기본값은 white이다. 드로어의 투명도를 설정하려면 rgba를 사용한다. 예제:

tsx
return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
타입필수 여부
color아니오

drawerLockMode​

드로어의 잠금 모드를 지정한다. 드로어는 세 가지 상태로 잠글 수 있다:

  • unlocked (기본값): 드로어가 터치 제스처에 반응해 열리거나 닫힌다.
  • locked-closed: 드로어가 닫힌 상태로 고정되며 제스처에 반응하지 않는다.
  • locked-open: 드로어가 열린 상태로 고정되며 제스처에 반응하지 않는다. 다만, 드로어는 프로그래밍 방식으로 열고 닫을 수 있다(openDrawer/closeDrawer).
타입필수 여부
enum('unlocked', 'locked-closed', 'locked-open')아니오

drawerPosition​

드로어가 화면의 어느 쪽에서 슬라이드되어 나올지 지정한다. 기본값은 left로 설정되어 있다.

타입필수 여부
enum('left', 'right')아니오

drawerWidth​

드로어의 너비를 지정한다. 더 정확히 말하면, 윈도우 가장자리에서 안쪽으로 당겨지는 뷰의 너비를 정의한다.

타입필수 여부
number아니오

keyboardDismissMode​

드래그 시 키보드가 사라지는 방식을 결정한다.

  • 'none' (기본값): 드래그해도 키보드가 사라지지 않는다.
  • 'on-drag': 드래그가 시작되면 키보드가 사라진다.
타입필수 여부
enum('none', 'on-drag')아니오

onDrawerClose​

네비게이션 뷰가 닫힐 때마다 호출되는 함수이다.

타입필수 여부
function아니오

onDrawerOpen​

네비게이션 뷰가 열릴 때마다 호출되는 함수다.

타입필수 여부
function아니오

onDrawerSlide​

네비게이션 뷰와 상호작용이 발생할 때마다 호출되는 함수이다.

타입필수 여부
function아니오

onDrawerStateChanged​

드로어 상태가 변경될 때 호출되는 함수. 드로어는 세 가지 상태를 가질 수 있다:

  • idle: 현재 네비게이션 뷰와 상호작용이 없는 상태
  • dragging: 현재 네비게이션 뷰와 상호작용 중인 상태
  • settling: 네비게이션 뷰와 상호작용이 있었고, 드로어가 열리거나 닫히는 애니메이션을 마무리 중인 상태
타입필수 여부
function아니오

renderNavigationView​

화면 옆에 렌더링되며, 필요 시 끌어올 수 있는 네비게이션 뷰를 정의한다.

타입필수 여부
function예

statusBarBackgroundColor​

드로어가 전체 화면을 차지하도록 설정하고, 상태 표시줄 위에 드로어가 열리도록 상태 표시줄의 배경색을 지정한다. 이 속성은 API 21 이상에서만 효과가 있다.

타입필수 여부
color아니오

메서드​

closeDrawer()​

tsx
closeDrawer();

드로어를 닫는다.

openDrawer()​

tsx
openDrawer();

드로어를 연다.