기업협업 TIL - 12. Tab Navigator

오늘은 React Native를 이용하면서 앱 내에서 화면전환을 할 수 있는 Navigator들의 사용법을 정리한다.

먼저 크게 그림으로 정리해놓았다.

먼저 로그인(Auth)을 통해 Main(Tab.Navigator)로 들어간다.
Main(Tab.Navigator)는 Home, Meeting, My Page 세가지 탭으로 이루어져 있다.

코드로 정리하면 이렇다.

export const Navigation = () => {
  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <Stack.Navigator>
          <Stack.Screen name="SignIn" component={SignInPresenter} options={{headerShown: false}} />
          <Stack.Screen name="Main" component={MainTabScreen} options={{headerShown: false}} />
        </Stack.Navigator>
      </NativeBaseProvider>
    </NavigationContainer>
  );
};

먼저 전체 큰 틀을 담당하는 Navigation.

const MainTabScreen = () => {
  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={HomeStackScreen} options={{headerShown: false}} />
      <Tab.Screen name="Meeting" component={Meeting} />
      <Tab.Screen name="MyPage" component={MyPage} />
    </Tab.Navigator>
  );
};

그 뒤 Tab.Navigator에 해당하는 MainTab이다.

const HomeStackScreen = () => {
  return (
    <Stack.Navigator>
      <HomeStack.Screen name="Main" component={MainPresenter} options={{headerShown: false}} />
      <HomeStack.Screen name="WorkLog" component={WorkLogPresenter} />
    </Stack.Navigator>
  );
};

마지막으로 Home Stack까지 작성해준다.

모두 합쳐보면 이런 느낌

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NativeBaseProvider} from 'native-base';
import {SignInPresenter} from './app/presentation/components/signIn/SignInPresenter';
import {WorkLogPresenter} from './app/presentation/components/workLog/WorkLogPresenter';
import {MainPresenter} from './app/presentation/components/main/MainPresenter';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Meeting} from './app/presentation/components/meeting/Meeting';
import {MyPage} from './app/presentation/components/myPage/MyPage';

const Stack = createNativeStackNavigator();
const HomeStack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeStackScreen = () => {
  return (
    <Stack.Navigator>
      <HomeStack.Screen name="Main" component={MainPresenter} options={{headerShown: false}} />
      <HomeStack.Screen name="WorkLog" component={WorkLogPresenter} />
    </Stack.Navigator>
  );
};

const MainTabScreen = () => {
  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={HomeStackScreen} options={{headerShown: false}} />
      <Tab.Screen name="Meeting" component={Meeting} />
      <Tab.Screen name="MyPage" component={MyPage} />
    </Tab.Navigator>
  );
};

export const Navigation = () => {
  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <Stack.Navigator>
          <Stack.Screen name="SignIn" component={SignInPresenter} options={{headerShown: false}} />
          <Stack.Screen name="Main" component={MainTabScreen} options={{headerShown: false}} />
        </Stack.Navigator>
      </NativeBaseProvider>
    </NavigationContainer>
  );
};

처음 이 두가지 Navigator를 섞어 사용해야 할 때는 감을 못 잡아 많이 헷갈렸지만 한 번 원리를 알고 나니 아주 간단한 문제였다.