더북(TheBook)

이전에 네이티브 스택 내비게이터를 사용했을 때와 사용법이 꽤 비슷합니다. createDrawerNavi gator 함수를 만들어 Drawer 객체를 만듭니다. 이 안에는 NavigatorScreen이 들어있는데 이를 컴포넌트로 사용하면 됩니다.

Drawer.Navigator에는 initialRouteName Props를 설정했는데요. 내비게이터에서 기본적으로 보여줄 화면의 이름입니다. 만약 이 값이 없다면 맨 위에 있는 화면(Home)이 뜹니다.

drawerPosition Props는 드로어가 나타나는 위치를 정합니다. 값을 "left" 또는 "right"로 지정할 수 있습니다. 따로 값을 지정하지 않으면 기본값은 "left"로 설정됩니다.

backBehavior Props는 뒤로가기를 할 때 어떻게 작동할지 설정합니다. 이 Props에 지정할 수 있는 값은 다음과 같습니다.

initialRoute: 가장 첫 번째 화면을 보여줍니다.

order: Drawer.Screen 컴포넌트를 사용한 순서에 따라 현재 화면의 이전 화면을 보여줍니다.

history: 현재 화면을 열기 직전에 봤던 화면을 보여줍니다.

none: 뒤로가기를 수행하지 않습니다.

기본적으로 화면의 좌측(drawerPosition"right"로 했다면 우측) 끝에서 중앙으로 스와이프하면 드로어가 나타납니다. 만약 원하는 상황에 직접 드로어를 보여주고 싶다면 navigation을 화면으로 사용된 컴포넌트의 Props로 받아와서 navigation.openDrawer 함수를 호출해주면 됩니다.

그리고 사용자 행동(예를 들어, 버튼 클릭)에 따라 다른 화면으로 이동하고 싶을 때는 navigation.navigate 함수를 사용하고, 뒤로가기를 하고 싶을 때는 navigation.goBack 함수를 호출하면 됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.