[React Native] Drawer와 Stack Navigatior 같이 사용하기

카테고리 : Development
태그: development, - React-Native - reactnative - react-navigation - StackNavigator - DrawerNavigator - Drawer와 Stack Navigatior 같이 사용하기

🔥 1. react native navigation 설치 진행

  • 해당 명령어는 react-navigation 을 사용하려면 필수 **yarn add @react-navigation/native** **yarn add react-native-screens react-native-safe-area-context** **yarn add @react-navigation/stack**
  • **yarn add @react-navigation/drawer**

🔥 2. 구현 과정

  • Drawer는 햄버거 메뉴의 해당 버튼을 클릭하거나 슬라이드 했을때 나타나는 사이드 메뉴를 구현할 때 사용된다
  • Drawer의 Page안에 Detail View를 구현 할 경우 Drawer와 Stack을 같이 사용해줘야한다

🔥 3. 스택 정의

3-1 : StackNavigator 생성

  • 일반적으로 화면 간의 네비게이션을 관리하는 데 사용되는 네비게이션 구성 방식
  • 각 화면은 Stack 구조로 관리된다 (이전 화면 위에 쌓아 올리는 방식)
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "./HomeScreen";
import Details from "./DetailScreen";

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Details" component={Details} />
    </Stack.Navigator>
  );
};

export { StackNavigator };
  • 메인 스크린(Home) 안에 Stack.Screen안에 정의된 name인 Details 페이지를 navigate 하여 스택을 쌓도록 정의
import React from "react";
import { Text, View, StyleSheet, Button } from "react-native";

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>HomeScreen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

3-2 : DrawerNavigator 생성

  • DrawerNavigator로 사이드 메뉴를 구현 StackNavigator는 위에 Home에 대한 Stack을 정의한다 ⇒ 따라서 Home 버튼을 누르면 StackNavigator 안에 메인 스크린을 불러옴
import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";
import { StackNavigator } from "./StackNavigator";
import About from "./AboutScreen";

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen
        name="Home"
        component={StackNavigator}
        options=
      />
      <Drawer.Screen
        name="About"
        component={About}
        options=
      />
    </Drawer.Navigator>
  );
};

3-3 : NavigationContainer로 정의

  • 그럼 구현하고자 하는 DrawerNavigator안에 StackNavigator를 하나씩 생성하여 각 DrawerMenu안에 각 StackNavigator을 만들어서 내부 스택을 따로 관리 할 수 있다
import React from "react";

import { NavigationContainer } from "@react-navigation/native";
import DrawerNavigator from "./DrawerNavigator";

function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

export default App;