React Navigation v6 기준 Drawer Navigation의 헤더가 있는 것이 디자인적으로 너무 마음에 안 들어서 헤더 자체를 삭제 후 Drawer Icon만 따로 만들어주기로 했다.
우선 Drawer Icon을 만들어준다. 본 예시에서는 react-native-vector-icons의 bars 아이콘(햄버거 icon 모양)을 활용했다.
useNavigation 훅을 사용하면 props로 전달받지 않아도 navigation을 사용할 수 있다.
Drawer Icon은 항상 화면의 우측 상단에 고정된 위치에 존재해야 하므로 position : absolute를 활용하였다.
이어서 각 스크린의 내용을 감싸줄 DrawerScreenContainer을 만들어준다.
DrawerIcon을 가장 하단에 위치시킨 이유는 z-index를 설정하지 않고도 가장 높은 레이어에 아이콘을 위치시키기 위해서이다. 그렇지 않으면 다른 컴포넌트들에 의해 Drawer Icon이 사용자에게 노출되지 않는 문제가 발생한다.
마지막으로 각 스크린의 내용을 DrawerScreenContainer로 감싸주면 된다.
화면에서 보이는 결과물은 다음과 같다.
'모바일 이야기' 카테고리의 다른 글
| [React Native] z-index가 적용되지 않을 때 (0) | 2022.02.13 |
|---|---|
| [React Native] Image aspect ratio 사용하기 (0) | 2022.02.12 |
| [React Native] TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions') (0) | 2022.02.04 |
| [React Native] Dimensions.get('window') vs Dimensions.get('screen') (0) | 2022.01.30 |
| 2021-11-03 React Native Notification 소리 설정 (0) | 2021.11.03 |