[REACT NATIVE] 리액트 내비게이션 라이브러리 - 드로어 내비게이터

- 좌측 또는 우측에 사이드바를 만들고 싶을 때 사용하는 내비게이터

- 사이드바 == 드로어(Drawer)

 

1. 사용하기

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

 

- react-native-geste-handler : 드로어 내비게이터에서 사용자 제스처를 인식하기 위하여 내부적으로 사용하는 라이브러리

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

- navigation.push, navigation.pop: 드로어 내비게이터에서 호환X

 

1. CreateDrawerNavigator 함수를 만들어 Drawer 객체 만들기

- Navigator와 Screen 컴포넌트 들어있음 

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

const Drawer = createDrawerNavigator();

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 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>
  );
}

export default App;

2. Drawer.Navigator 

- initalRouteName : 내비게이터에서 기본적으로 보여줄 화면의 이름 

- drawerPosition: 드로어가 나타나는 위치 (default: left)

- backBehavior: 뒤로가기를 할 때 어떻게 작동할지 설정

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

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

- 사용자 행동에 따라 다른 화면으로 이동하고 싶을 때: navigation.navigate 함수 호출

                                   뒤로가기 하고 싶을 때: navigation.goBack 함수 호출

 

2. 커스터마이징 하기

 

- Screen 컴포넌트에 options Props를 통해 title값 지정

- Drawer.Navigator 컴포넌트에 screenOptions Props 설정

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

- 헤더 좌측 햄버거 버튼 바꾸고 싶으면 --> Drawer.Screen의 options에서 headerLeft에 컴포넌트 설정

- 모든 화면에 공통으로 헤더의 커스터마이징 하고 싶으면 --> Drawer.Navigator의 screenOptions Props에 헤더와 관련해 설정