드로어 내비게이터(Drawer Navigator) 사용하기

드로어 내비게이터(Drawer Navigator) 설정 및 사용법

드로어 내비게이터(Drawer Navigator)는 촤측 또는 우측 사이드바를 만들고 싶을 때 사용하는 내비게이터다.

사이드바를 모바일 앱에서는 드로어(Drawer)라고 부른다.

내비게이터를 사용하려면 아래와 같은 명령어를 통해 라이브러리를 설치해야 한다.

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

• react-native-gesture-handler : 드로어 내비게이터에서 사용자 제스처를 인식하기 위해서 내부적으로 사용하는 라이브러리
• react-native-reanimated : 리액트 네이티브에 내장된 애니메이션 효과 기능보다 더욱 개선된 성능으로 애니메이션 효과를 구현해주는 라이브러리

예제 코드

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {View, Text, Button} from 'react-native';

function HomeScreen({navigation}) {
  return (
    <View>
      <Text>Home</Text>
      <Button title="Drawer 열기" onPress={() => navigation.openDrawer()} />
      <Button
        title="Setting 열기"
        onPress={() => navigation.navigate('Setting')}
      />
    </View>
  );
}

function SettingScreen({navigation}) {
  return (
    <View>
      <Text>Setting</Text>
      <Button title="뒤로가기" onPress={() => navigation.goBack()} />
    </View>
  );
}

function DrawerNavigationApp() {
  const Drawer = createDrawerNavigator();
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        drawerPosition="left"
        backBehavior="history">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Setting" component={SettingScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default DrawerNavigationApp;

 

드로어 내비게이터와 네이티브 스택 내비게이터의 사용법은 비슷하다.

createDrawerNavigator 함수로 만든 Drawer 객체에는 Navigator과 Screen이 들어있는데 이를 컴포넌트로 사용하면 된다.

Drawer.Navigator 속성은 아래와 같다.

• initialRouteName : 기본으로 보여줄 화면의 이름(default 맨 위 화면)
• drawerPosition : 드로어가 나타나는 위치를 설정(left 또는 right, default left)
  (요거는 현재 예제에서 적용되지 않는데 screenOptions 속성에 drawerPosition 옵션을 주면 설정할 수 있다.)
• backBehavior : 뒤로가기 방법 설정
  - initialRoute : 가장 첫 번째 화면으로 이동
  - order : Drawer.Screen 컴포넌트를 사용한 순서에 따라 현재 화면의 이전 화면으로 이동
  - history : 현재 화면을 열기 직전에 화면으로 이동
  - none : 뒤로가기를 수행하지 않음

만약 원하는 상황에 직접 드로어를 보여주고 싶다면 navigation을 화면으로 사용된 컴포넌트에 Props로 받아와서 navigation.openDrawer 함수를 호출하면 된다.

그리고 다른 화면으로 이동하고 싶을 때는 navigation.navigate 함수를 사용하고, 뒤로가기를 하고 싶을 때는 navigation.goBack 함수를 호출하면 된다.

 

드로어 커스터마이징하기

네이티브 스택 내비게이터를 사용할 때 헤더를 커스터마이징한 것처럼 드로어 또한 커스터마이징할 수 있다.

타이틀은 options 속성에 title을 설정하면 된다.

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={{title: '홈'}}
/>

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

<Drawer.Navigator
  initialRouteName="Home"
  backBehavior="history"
  screenOptions={{
    drawerActiveBackgroundColor: '#fb8c00',
    drawerActiveTintColor: 'white',
  }}>
  
  ...
  
</Drawer.Navigator>

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

Drawer 컴포넌트가 나타나는 영역에 아예 다른 UI를 보여주고 싶다면 drawerContent Props에 함수 컴포넌트를 넣어주면 된다.

<Drawer.Navigator
  initialRouteName="Home"
  backBehavior="history"
  drawerContent={({navigation}) => (
    <SafeAreaView>
      <Text>A Custom Drawer</Text>
      <Button
        onPress={() => navigation.closeDrawer()}
        title="Drawer 닫기"
      />
    </SafeAreaView>
  )}>
 
...

</Drawer.Navigator>

iOS도 지원하는 앱이라면 drawerContent를 지정할 때 SafeAreaView를 꼭 사용해야 한다. 사용하지 않는다면 StatusBar 영역과 겹치게 된다.

drawerContent에 넣는 함수 컴포넌트에서도 navigation을 사용할 수 있다.

 

만약 헤더 좌측에 보여지는 햄버거 버튼을 바꾸고 싶다면 Drawer.Screen options에서 headerLeft에 컴포넌트를 설정하면 된다.

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={{title: '홈', headerLeft: () => <Text>LEFT</Text>}}
/>

만약 모든 화면에 공통으로 헤더의 커스터마이징을 적용하려면 Drawer.Navigator의 screenOptions Props에 헤더와 관련해 설정하면 된다.

<Drawer.Navigator
  initialRouteName="Home"
  backBehavior="history"
  screenOptions={{headerShown: false}}>
  
  ...
  
</Drawer.Navigator>

 

자세한 내용은 아래 공식 문서에서 확인할 수 있다.

https://reactnavigation.org/docs/drawer-navigator/