[React Native] Tab 및 Drawer 네비게이션 만들기

※ 이 포스트는 yarn 및 React Native CLI와 함수형 컴포넌트를 사용하였다.

1. 왜 필요한가?

웹에서 탭 및 드로어 네비게이션을 구현할 수 있지만 해당 방법으로 개발하면 웹을 로드할 때 해당 네비게이션들도 다시 로드해야 하므로 페이지 로드 시간이 길어지는 문제가 있다. 이러한 문제를 해결하고자 네이티브 앱에서 탭 및 드로어 네비게이션을 구현하여 웹뷰 앱에서 오직 웹만 로드하는 방식으로 웹뷰 앱이 개발된다.

2. 과정

해당 라이브러리를 사용하면 네비게이션을 쉽게 구현할 수 있다.

• @react-navigation/native: 네비게이션 컨테이너를 생성해주는 라이브러리이다.
• @react-navigation/drawer: 드로어 네비게이션을 생성해주는 라이브러리이다.
• @react-navigation/bottom-tabs: 탭 네비게이션을 생성해주는 라이브러이다.

3. 결과

해당 라이브러리와 그 밖의 필요한 라이브러리들을 설치한다.

yarn add @react-navigation/native @react-navigation/drawer @react-navigation/bottom-tabs react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

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

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

설치한 라이브러리를 프로젝트 파일에 포함시킨다.

import {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={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

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

App함수에서 드로어 네비게이션 화면을 출력하도록 정의하고 해당 화면에서 탭 네비게이션을 출력하도록 설정하여 탭과 드로어 네비게이션을 동시에 사용하도록 할 수 있다.

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

전체코드는 다음과 같다.

import * as React from 'react';
import {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={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

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

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