Expo Router에서 탭 네비게이션 헤더 제어하기

Expo Router와 React Native에서 탭 네비게이션을 사용할 때 화면 상단에 나타나는 헤더를 관리하는 방법에 대해 알아보겠습니다.

문제 상황

탭 기반 네비게이션을 구현했을 때, 기본적으로 각 탭의 이름이 화면 상단 헤더에 표시됩니다. 예를 들어 '가이드', '매칭', '코트', '마이페이지' 등의 탭 이름이 상단에 그대로 노출됩니다.

이러한 기본 헤더가 디자인에 맞지 않거나 불필요한 경우, 몇 가지 방법으로 이를 제어할 수 있습니다.

해결 방법

헤더 완전히 숨기기

모든 탭에서 헤더를 완전히 제거하는 가장 간단한 방법은 screenOptions에 headerShown: false 속성을 추가하는 것입니다.

import React from "react";
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { colors } from "../../src/styles/colors";

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ 
      tabBarActiveTintColor: colors.primary,
      headerShown: false // 모든 탭에 대해 헤더 숨기기
    }}>
      <Tabs.Screen
        name="guide"
        options={{
          title: "가이드",
          tabBarIcon: ({ color }) => (
            <Ionicons name="book" size={24} color={color} />
          ),
        }}
      />
      {/* 다른 탭들... */}
    </Tabs>
  );
}

특정 탭만 헤더 숨기기

특정 탭에서만 헤더를 숨기고 싶다면, 해당 Tabs.Screen의 options에 개별적으로 headerShown: false를 설정할 수 있습니다.

<Tabs.Screen
  name="guide"
  options={{
    title: "가이드",
    headerShown: false, // 이 탭에서만 헤더 숨기기
    tabBarIcon: ({ color }) => (
      <Ionicons name="book" size={24} color={color} />
    ),
  }}
/>

헤더는 유지하되 타이틀만 숨기기

헤더의 기능(예: 뒤로 가기 버튼)은 필요하지만 타이틀 텍스트만 숨기고 싶을 경우, headerTitle 속성을 빈 문자열로 설정할 수 있습니다.

<Tabs screenOptions={{ 
  tabBarActiveTintColor: colors.primary,
  headerTitle: "" // 헤더 타이틀을 빈 문자열로 설정
}}>

커스텀 헤더 컴포넌트 사용하기

더 복잡한 헤더 UI가 필요한 경우, 커스텀 헤더 컴포넌트를 정의하여 사용할 수 있습니다.

<Tabs.Screen
  name="guide"
  options={{
    title: "가이드",
    headerTitle: () => <CustomHeaderComponent />,
    tabBarIcon: ({ color }) => (
      <Ionicons name="book" size={24} color={color} />
    ),
  }}
/>

마무리

Expo Router의 탭 네비게이션에서 헤더를 제어하는 방법은 여러 가지가 있으며, 앱의 디자인 요구사항에 맞게 적절한 방법을 선택하면 됩니다. 헤더를 완전히 숨기거나, 특정 탭에서만 숨기거나, 또는 커스텀 헤더를 사용하는 방식 등 다양한 옵션을 활용할 수 있습니다.

이러한 헤더 관리 방법은 Expo Router뿐만 아니라 React Navigation을 사용하는 다른 React Native 프로젝트에서도 유사하게 적용될 수 있습니다.