React Native에서 Stack Navigation과 Tab Navigation을 함께 사용하는 방법을 정리합니다.

---

React Native 설치는 이성훈 개발자님의 블로그를 참고하면 됩니다. 이번 글은 CLI 기준으로 작성했지만 Expo에서도 같은 방식으로 사용할 수 있을 것입니다.

---

• TabNavigation
• 화면 하단에 탭을 두고 여러 화면 사이를 전환합니다. 각 화면은 처음 선택될 때 마운트됩니다.

• StackNavigation
• 새 화면을 스택 맨 위에 쌓는 방식으로 화면을 전환합니다.
• 상단의 뒤로 가기 버튼을 누르면 이전 화면으로 순서대로 돌아갑니다.

---

이번 글에서는 Stack Navigation과 Tab Navigation만 다룹니다. 두 가지를 함께 쓰는 자료가 많지 않아 고생했던 기억이 있어 다시 정리했습니다. 부족한 설명은 아래 공식 문서를 참고해 주세요. React Navigation 공식 문서

터미널
// yarn 사용자
$ yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

// npm 사용자
$ npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

먼저 터미널에서 네비게이션 모듈을 설치합니다. 이번에는 하단 탭(Bottom Tab)을 사용합니다.

StackNavigation.js

import React from "react";

import { createNativeStackNavigator } from "@react-navigation/native-stack";

import HomeScreen from '../Screen/Home/Home';

import MapsScreen from '../Screen/Maps/Maps';

import SignupScreen from '../Screen/Login/signup';
import SigninScreen from '../Screen/Login/signin';
import SuccessScreen from '../Screen/Login/success';

const Stack = createNativeStackNavigator();
const HomeStack = createNativeStackNavigator();
const MapsStack = createNativeStackNavigator();
const LoginStack = createNativeStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "white",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
  headerTitle:  props => <LogoTitle {...props} />
};

const HomeStackNavigator = () => {
  
    return (
      <Stack.Navigator screenOptions={screenOptionStyle}>
        <HomeStack.Screen 
          name="Home" 
          component={HomeScreen} 
        />
      </Stack.Navigator>
    );
}

const MapsStackNavigator = () => {
    return (
      <Stack.Navigator screenOptions={screenOptionStyle}>
        <MapsStack.Screen
          name="Maps"
          component={MapsScreen}
        />
      </Stack.Navigator>
    );
}

const LoginStackNavigator = () => {
  
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <LoginStack.Screen 
        name="signup" 
        component={SignupScreen} 
        options={({navigation, route}) => ({
           headerLeft: null,
           headerTitle: '회원가입',
         })}
      />
      <LoginStack.Screen 
        name="signin" 
        component={SigninScreen} 
        options={({navigation, route}) => ({
           headerLeft: null,
           headerTitle: '로그인',
         })}
      />
      <LoginStack.Screen 
        name="success" 
        component={SuccessScreen} 
        options={({navigation, route}) => ({
           headerLeft: null,
           headerTitle: '완료',
         })}
      />
    </Stack.Navigator>
  );
}

export { HomeStackNavigator , MapsStackNavigator , LoginStackNavigator};

각 화면을 Stack으로 먼저 구성한 뒤, 이 Stack들을 Tab Navigation에 연결해 하단 탭으로 보여 줍니다.

TabNavigation.js

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Icon from 'react-native-vector-icons/Ionicons'; // 아이콘 추가할거면 모듈 추가후 추가해주시면 되요
import { HomeStackNavigator, MapsStackNavigator , LoginStackNavigator} from "./StackNavigator"; 
// StackNavigator에서 내보낸 스택들을 불러오기

const Tab = createBottomTabNavigator();

const BottomTabNavigator = ({navigation}) => {

  return (
    <Tab.Navigator initialRouteName="LoginStack"> // initialRouteName은 처음에 들어오자마자 보일 화면을 설정하는 메소드에요
      <Tab.Screen name="HomeStack" 
        component={HomeStackNavigator}
        options={{
          headerShown: false,
          tabBarIcon: ({color, size}) => (
            <Icon name="home-outline" color={color} size={size} />
          ),
      }}
      />
      <Tab.Screen name="MapsStack" 
        component={MapsStackNavigator} 
        options={{
          headerShown: false,
          tabBarIcon: ({color, size}) => (
            <Icon name="map-outline" color={color} size={size} />
          ),
      }}
      />
      <Tab.Screen 
        name="LoginStack" 
        component={LoginStackNavigator} 
        options={({ route }) => ({
            headerShown: false,
            tabBarIcon: ({color, size}) => (
              <Icon name="person-circle" color={color} size={size} />
            ),
        })}
      />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

각 Stack을 탭의 컴포넌트로 불러온 뒤 BottomTabNavigator로 내보내고, App에서 불러오면 됩니다.

App.js

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

import BottomTabNavigator from "./Navigation/TabNavigator";

import styled from "styled-components";

 const App = () => {
  return (

     <NavigationContainer>
       <BottomTabNavigator />
     </NavigationContainer>
  )
 }

export default App;

네비게이션 설정에 하루 정도 걸려서 잊지 않으려고 정리했습니다. 화면 간 이동과 파라미터 전달은 공식 문서에서 확인할 수 있습니다.

navigation.navigate('RouteName', { /* params go here */ })

웹에서는 하단 탭과 화면 이동을 이렇게 깊이 고민해 본 적이 없었는데, 이번에 많이 배웠습니다.