React Native) Drawer Navigator 사용하기

좌측 또는 우측에 사이드바를 만들고 싶을 때 사용

 

---

 

라이브러리 설치

라이브러리 설치 명령어)

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

* 이후 시뮬레이터 재실행 필요(yarn android / yarn ios)

만약, 시뮬레이터 재실행 중 오류가 난다면,
yarn start --reset-cache
명령어로 캐시를 지우고 시뮬레이터를 재실행 해야함

이전에 사용한 navigation.push, navigation.pop 기능은 드로어 네비게이터에서 호환되지 않음

---

 

Drawer Navigator 사용하기

사용 예제 코드)

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

const Drawer = createDrawerNavigator();

function 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;

네이티브 스택 네비게이터와 구조는 비슷
1) createDrawerNavigator 함수로 Drawer 객체 생성
2) NavigationContainer 태그 안에 Navigator, Screen 태그 등록해서 스크린 생성

Drawer.Navigator Props 설명
- initialRouteName : 기본적으로 보여줄 화면 이름 등록
- drawerPosition : 드로어가 나타나는 위치 지정 (left / right)
- backBehavior : 뒤로가기 동작 방식 지정
  * initialRoute : 가장 첫번째 화면으로 이동
  * order : Drawer.Screen 컴포넌트 사용 순서에 따라 현재 화면의 이전 화면으로 이동
  * history : 현재 화면 열기 직전에 봤던 화면으로 이동
  * none : 뒤로가기 안함

navigation 액션 호출
- navigation.openDrawer() : 드로어 열기
- navigation.closeDrawer() : 드로어 닫기
- navigation.navigate(화면이름) : 화면 이동하기
- navigation.goBack() : 뒤로 가기

---

 

드로어 커스터마이징 하기

네이티브 스택 네비게이터 처럼 option Props 를 통해서 설정

<NavigationContainer>
  <Drawer.Navigator
    initialRouteName="Home"
    drawerPosition="left"
    backBehavior="history"
  >
    <Drawer.Screen 
    	name="Home"
        component={HomeScreen}
        options={{title: 'Home'}}
    />
    <Drawer.Screen
    	name="Setting"
        component={SettingScreen}
        options={{title: 'Setting'}}
    />
  </Drawer.Navigator>
</NavigationContainer>

Drawer.Navigator screenOption Props에서 전체 드로어 스타일에 관한 옵션지정 방법)
- drawerActiveTintColor : 활성화된 항목의 텍스트 색상
- drawerActiveBackgroundColor : 활성화된 항목의 배경색
- drawerInactiveTintColor  : 비활성화된 항목의 텍스트 색상
- drawerInactiveBackgroundColor : 비활성화된 항목의 배경색
- drawerItemStyle : 항목의 스타일
- drawerLabelStyle : 항목 내부의 텍스트 스타일
- drawerContentContainerStyle : 항목들을 감싸고 있는 영역의 스타일
- drawerStyle : 전체 드로어를 감싸고 있는 영역의 스타일
- headerShown : 헤더 표시 여부 선택

---

 

아예 다른 UI 컴포넌트 만들기

drawerContent Props에 함수 컴포넌트 등록)

<NavigationContainer>
  <Drawer.Navigator
    initialRouteName="Home"
    drawerPosition="left"
    backBehavior="history"
    drawerContent={({navigation}) => (
      <SafeAreaView>
        <Text>A Custom Drawer</Text>
        <Button
          onPress={() => navigation.closeDrawer()}
          title="Drawer 닫기"
        />
      </SafeAreaView>
    )}>
    <Drawer.Screen
      name="Home"
      component={HomeScreen}
      options={{title: '홈', headerLeft: () => <Text>Left</Text>}}
    />
    <Drawer.Screen
      name="Setting"
      component={SettingScreen}
      options={{title: '설정'}}
    />
  </Drawer.Navigator>
</NavigationContainer>

SafeAreaView 사용하지 않으면, 드로어 상단 영역이 StatusBar 영역을 침범함(iOS만 해당함)

위 코드와 같이 drawerContent 등록 시, 기존에 등록했던 Drawer.Screen 내역은 사라짐

---

 

햄버거 버튼 수정

drawerPosition을 left 로 지정했을 시,
해당 Drawer.Screen options Props에서 headerLeft 객체를 따로 등록
예시)

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

만약 navigation 을 활용해 액션을 추가하려면, 해당 화면 컴포넌트에서 useEffect() 함수를 활용하여 수정함
예시)

function HomeScreen({ navigation }: any) {
  useEffect(() => {
    navigation.setOptions({
      title: '홈1',
      headerLeft: () => <Button title="left" onPress={() => navigation.openDrawer()} />
    });
  }, [navigation]);

  return (...);
}

React Native) Drawer Navigator 사용하기