[RN]드로어 네비게이터(a.k.a 사이드바)

드로어 네비게이터란

드로어 네비게이터는 좌측 또는 우측에 사이드바를 만들고 싶을 때 사용하는 네비게이터다.
사이드바를 모바일에서는 드로어라고 부른다.
내비게이터 사용을 위해 아래의 라이브러리를 설치해주자.

$ yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated
$ cd ios
$ pod insatll

reat-native-gesture-handler는 드로어 네비게이터에서 사용자 제스처를 인식하기 위하여
내부적으로 사용하는 라이브러리다. 그리고 react-native-reanimated는 리액트 네이티브에
내장된 애니메이션 효과 기능보다 더욱 개선된 성능으로 애니메이션 효과를 구현해주는 라이브러리다.
설치 이후에는 yarn ios와 yarn android 명령어를 다시 입력해서 시뮬레이터를 재실행해준다.
참고로 navigation.push와 navigation.pop같은 기능은 드로어 네비게이터에서 호환되지 않는다.

import {createDrawerNavigator} from '@react-navigation/drawer'

사용을 위해 임포트를 해주고

  <Button 
    title='Drawer 열기'
    onPress={()=> navigation.openDrawer()} />

버튼을 생성해준다.

네이티브 스택 내비게이터와 사용법이 꽤 유사하다.
Drawer.Navigator에는 initialRouteName Props를 설정했다.
내비게이터에서 기본적으로 보여줄 화면의 이름을 의미하며, 만약 이 값이 없다면 맨 위에 있는
화면(Home)이 뜬다.
drawerPosition Props는 드로어가 나타나는 위치를 정한다. 값을 "left" 또는
"right"로 지정할 수 있다. 따로 값을 지정하지 않으면 디폴트로 left가 설정된다.

backBehavior Props는 뒤로가기를 할 때 어떻게 작동할지 설정한다.
이 Props에 지정할 수 있는 값은 아래와 같다.

• initialRoute : 가장 첫 번째 화면을 보여준다.
• order : Drawer.Screen 컴포넌트를 사용한 순서에 따라 현재 화면의 이전 화면을 보여준다.
• history : 현재 화면을 열기 직전에 봤던 화면을 보여준다.
• none : 뒤로가기를 수행하지 않는다.

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

드로어 커스터마이징하기

드로어에 나오는 화면 이름은 네이티브 스택 네비게이트를 사용했을 때처럼 screen 컴포넌트에 optiopn Pops를 통해 title값을 지정하면된다.

  <Drawer.Screen
  name="Home"
  component={HomeScreen}
  option={{title:'홈'}}
  />
    <Drawer.Screen
  name="Setting"
  component={SettingScreen}
  option={{title:'설정'}}
  />

드로어의 스타일을 변경하고자 할 때는 다음과 같이 Drawer.Navigator 컴포넌트에 screenOptions Props를 설정하면 된다. 다음 값들이 들어있는 객체를 설정하면 된다.

• drawerActiveTintColor : 활성화된 항목 테스트 색상
• drawerActiveBackgroundColor : 활설화된 항목 배경색
• drawerInactiveTintColor : 비활성화된 항목 테스트 색상
• drawerInactiveBackgroundColor : 비활성화된 항목 배경색
• drawerItemStyle : 항목 스타일
• drawerLabelStyle : 항목 내부 텍스트 스타일
• drawerContentContainerStyle : 항목을 감싸고 있는 영역 스타일
• drawerStyle : 전체 드로어를 감싸고 있는 영역 스타일

참고 : iOS도 지원하는 앱이라면 drawerContent를 지정할 때 SafeAreaView를 꼭 사용해줘야한다. 그렇지 아니한 경우, 드로어의 상단부 영역이 StatusBar 영역과 겹치게 된다.

출처 및 참고 : 리액트 네이티브를 다루는 기술