[ React Native Expo ] Drawer Navigator

메뉴를 구성하기 위해 Drawer Navigator를 사용

 

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

Drawer Navigator | React Navigation

 

Navigation docs에서 expo기준으로 진행

---

Setup

두개를 설치

npm install @react-navigation/drawer

npx expo install react-native-gesture-handler react-native-reanimated

 

index.ts 파일에 import를 해준다.

import 'react-native-gesture-handler';

---

Useage

 

Navigation은 어디서든 사용하므로  App.tsx 파일에 NavigationContainer로 감싸서 사용

import {StyleSheet} from 'react-native';
import {NavigationContainer} from "@react-navigation/native";
import RootNavigator from "./src/navigations/root/RootNavigator";

export default function App() {
    return (
        <NavigationContainer>
            <RootNavigator/>
        </NavigationContainer>
    );
}

 

추후 다른 Navigator를 사용할 수도 있으므로

경우에 따른 Navigator를 설정하기 위해 Root안에 우선 MainDrawerNavigator를 추가하여 컨트롤

export default function RootNavigator() {
    return (
        <>
            <MainDrawerNavigator/>
        </>
    )
}

 

Drawer를 사용하기 위해서 createDrawerNavigator를 생성해준 후

각 메뉴별로 사용할 컴포넌트들을 추가해준다.

const Drawer = createDrawerNavigator();
export default function MainDrawerNavigator() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="MapHome" component={MapHomeScreen}/>
            <Drawer.Screen name="FeedHome" component={FeedHomeScreen}/>
            <Drawer.Screen name="CalendarHome" component={CalendarHomeScreen}/>
        </Drawer.Navigator>
    )
}

 

우선 처음 화면은 기본적으로 맨 위 컴포넌트를 화면에 보여준다.

따라서 MapHomeScreen 화면이 나오고

좌측 상단에 메뉴 아이콘이 생성된 것을 확인 할 수 있다.

 

메뉴 아이콘을 누르면 옆으로 메뉴바가 나오고

선택한 컴포넌트로 이동하는 것을 확인 할 수 있다.