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

설치 이후에는 yarn ios와 yarn android 명령어를 다시 입력하여 시뮬레이터를 다시 시작해주세요.

그다음에는 App 컴포넌트를 열어 코드를 다음과 같이 수정해주세요. 이전에 만든 HomeScreen과 DetailScreen은 더 이상 사용하지 않겠습니다. 이전에 사용한 navigation.push, navigation.pop 같은 기능들은 드로어 내비게이터에서 호환되지 않습니다.

App.js

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 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} />
        <Drawer.Screen name="Setting" component={SettingScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;