Skip to main content
Version: Next

DrawerLayoutAndroid

안드로이드 전용 플랫폼 DrawerLayout을 감싸는 React 컴포넌트이다. 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​

화면의 어느 쪽에서 서랍(drawer)이 슬라이드되어 들어올지 지정한다. 기본값은 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();

드로어를 연다.