[react-native] Drawer navigator

 좌측 또는 우측에 사이드바를 만들고 싶을 때 사용하는 네비게이터이다. App 환경에서 보통 사이드바를 Drawer이라고 부르기 때문에 Drawer navigator라고 부르는 거 같다.

 

Drawer navigator를 사용하기 위해서는 우선, drawer-navigator, gesture-handler, native-reanimated 이렇게 3가지 라이브러리들을 설치해야 한다.

yarn add @react-navigation/drawer@next react-native-gesture-handler react-native-reanimated

 

- react-native-gesture-handler: 사용자의 제스처 인식을 위한 라이브러리

- react-native-reanimated: 리액트 네이티브에 내장된 애니메이션 기능보다 더욱 개선된 성능으로 애니메이션 효과를 구현해주는 라이브러리

 

- react-native-reanimated를 설치하고 나서 반드시 프로젝트 폴더의 babel.config.js에 해당 플러그을 추가한 뒤, metro bundler를 한 번 초기화해야, 오류 없이 빌드가 된다.

 

◎babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

 

yarn start --reset-cache

 

바로 한번 어떻게 사용하는 지 알아보자.

---

◎ App.js

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

const Drawer = createDrawerNavigator();

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

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

const App = () => {
  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 App;

 

기본적인 사용법은 네이티브 스택 네비게이터와 크게 다르지 않다. 단지 push, pop 함수를 사용하지 못한다는 점과, backBehavior로 여러 뒤로가기 동작들을 수행할 수 있다는 점에 차이가 있다.

 

또한 각 스크린의 options 옵션을 사용하여, 드로어에 title을 달아줄 수도 있다.

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName={'Home'}
        drawerPosition={'Left'}
        backBehavior={'history'}>
        <Drawer.Screen
          name={'Home'}
          component={HomeScreen}
          options={{title: '홈'}}
        />
        <Drawer.Screen
          name={'Setting'}
          component={SettingScreen}
          options={{title: '설정'}}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

---

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

 

screanOptions 옵션을 사용하여 아래와 같이 스타일링도 가능하다.

 

---

Drawer 안에 다른 컴포넌트를 넣을 수도 있다.

  <Drawer.Navigator
    initialRouteName={'Home'}
    drawerPosition={'Left'}
    backBehavior={'history'}
    screenOptions={{
      drawerActiveBackgroundColor: '#fb8c00',
      drawerActiveTintColor: 'white',
    }}
    drawerContent={({navigation}) => (
      <SafeAreaView>
        <Text>A Custom Drawer</Text>
        <Button
          onPress={() => navigation.closeDrawer()}
          title={'Drawer 닫기'}
        />
      </SafeAreaView>
    )}>

 

 

그 외에도 다양한 옵션과 설정 방법이 있으니, 여기를 참조하도록 하자.