[React Native] Expo 프로젝트에서 Tab 및 Drawer 네비게이션 구현하기

※ 이 포스트는 expo프로젝트를 기준으로 작성되었다.

1. 왜 필요한가?

이 전 포스트에서 React Native CLI를 사용하여 생성한 프로젝트의 탭 및 드로어 네비게이션을 구현하는 방법에 대해서 작성한 적이 있다. 필자의 경우에는 앱의 스플래시 이미지와 ios앱의 빌드 등 여러가지 편의성을 위하여 expo프로젝트를 사용한다. 그래서 이번 포스트에서 expo프로젝트에서 탭 및 네비게이션을 구현하는 방법에 대해 작성하였다.

2. 과정

이전의 React Native CLI로 생성한 프로젝트와 비슷한 방법으로 구현하면 된다. 하지만 라이브러리를 설치하는 방법에 대해 차이가 있다.

3. 결과

expo프로젝트에서 탭 및 드로어 네비게이션을 구현하기 위한 라이브러리를 설치한다.

npm install @react-navigation/native @react-navigation/drawer @react-navigation/bottom-tabs

그리고 expo 명령어로 필수 라이브러리를 설치한다.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

설치가 완료되면 babel.config.js파일에서 다음의 코드를 return괄호 안에 추가하여 react-native-reanimated플러그인을 적용한다.

plugins: ["react-native-reanimated/plugin"]

코드는 React Native CLI로 생성한 프로젝트에서 작성한 코드와 비슷하게 작성하면 된다. 필자는 expo-status-bar라이브러리를 사용하여 상태줄을 추가하여 작성하였다. 우선 사용할 라이브러리를 프로젝트 파일에 추가한다.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

탭과 드로어 네비게이션을 생성하기 위해 추가한 라이브러리를 객체로 생성한다.

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

테스트에 사용할 화면과 탭 네비게이션을 출력할 함수를 정의한다.

// 홈화면
function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
}

// 프로필 화면
function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text>Profile Screen</Text>
    </View>
  );
}

// 탭 네비게이션
function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={() => {
        return { headerShown: false };
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

테스트 화면에서 사용할 스타일 코드를 작성한다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

드로어 네비게이션을 기본으로 출력한 후 탭 네비게이션이 출력되고 테스트 화면을 출력하는 방식으로 코드를 작성하면 탭과 드로어 네비게이션을 동시에 사용할 수 있다.

export default function App() {
  return (
    <>
      <StatusBar style="inverted" />
      <NavigationContainer>
        <Drawer.Navigator screenOptions={{ drawerPosition: "left" }}>
          <Drawer.Screen
            name="TabNavigator"
            component={TabNavigator}
            options={{ title: "Main" }}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    </>
  );
}

전체코드는 다음과 같다.

import React from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text>Profile Screen</Text>
    </View>
  );
}

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={() => {
        return { headerShown: false };
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <>
      <StatusBar style="inverted" />
      <NavigationContainer>
        <Drawer.Navigator screenOptions={{ drawerPosition: "left" }}>
          <Drawer.Screen
            name="TabNavigator"
            component={TabNavigator}
            options={{ title: "Main" }}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});