5.2.5 헤더 커스터마이징하기

react-navigation에서는 타이틀 영역을 헤더(Header)라고 부릅니다. 이번에는 헤더를 커스터마이징하는 방법을 알아봅시다.

5.2.5.1 타이틀 텍스트 변경하기

먼저 Home 화면의 타이틀 텍스트를 변경해보겠습니다. 영어로 Home이라고 되어 있는데 ‘홈’이라고 한글로 나타나게 변경해봅시다.

헤더를 커스터마이징하는 방법은 두 가지가 있는데, 첫 번째 방법은 Stack.Screen의 Props로 설정하는 것입니다. App 컴포넌트를 다음과 같이 수정해보세요.

App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: '홈',
          }}
        />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

▲ 그림 5-8 Home 타이틀 텍스트 변경