본문 바로가기

프론트-엔드/리액트-네이티브(ReactNative)

[RN] React Navigation Docs(6) - Drawer Navigator


React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.


[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params




아래에 보이는 화면이 Drawer Navigator 입니다. 감이 확 오시나요?




DrawerNavigator



DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)


다음은 DrawerNavigatorConfig 의 옵션들입니다. DrawerNavigator는 Navigation의 로직을 수정하기 위한 옵션 뿐 아니라, 드로어의 위치, 폭, 애니메이션 등의 옵션들도 설정할 수 있습니다.


drandWidth - 드로어의 폭
drawerPosition - 왼쪽 또는 오른쪽을 설정하는 옵션. 디폴트는 왼쪽 위치.
contentComponent - DrawerItems와 같은 드로어의 내용을 렌더링하는 데 사용되는 구성 요소. 드로어에 대한 props를 받을 수 있다. 디폴트는 DrawerItems.

useNativeAnimations - 기본 애니메이션을 사용할 수 있다. 디폴트는 true.
drawerBackgroundColor - 드로어의 배경 색상. 디폴트는 흰색입니다.

initialRouteName - 초기 경로에 대한 routeName.
order - drawer item 들의 순서를 정의.
path -  routeName의 매핑을 path config 로 제공.
backBehavior - 뒤로가기 버튼을 눌렀을 때, 드로어가 초기 경로로 전활될지의 여부. 'initialRoute'인 경우 스위치의 초기 경로로 돌아간다.  'none' 으로 설정하면, 전 route로 가거나 전 route가 없을 시 앱이 종료된다. 디폴트는 none.




[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params