5.3.5 머티리얼 하단 탭 내비게이터 헤더 타이틀 동기화하기

머티리얼 하단 탭 내비게이터는 머티리얼 상단 탭 내비게이터와 마찬가지로 헤더가 없습니다. 그래서 현재 네이티브 스택 내비게이터에서 설정된 타이틀인 Main이 타이틀로 보여지고 있습니다. 이번에는 머티리얼 하단 탭 내비게이터에서 선택된 탭과 헤더의 타이틀을 동기화하는 방법을 알아보겠습니다.

우선, App 컴포넌트의 코드를 다음과 같이 수정해보세요.

App.js

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

const Stack = createNativeStackNavigator();

function getHeaderTitle(route) {
  const routeName = getFocusedRouteNameFromRoute(route);
  console.log(routeName);
  return routeName;
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={({route}) => ({
            title: getHeaderTitle(route),
          })}
        />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;