이렇게 하면 컴포넌트가 처음 화면에 나타난 다음에 navgiation.setOptions 함수를 호출해 타이틀 텍스트를 변경합니다. 참고로 useEffect를 통해서 설정한 내비게이션 option은 App 컴포넌트에서 Props를 통해 설정한 option을 덮어쓰게 됩니다.

이번에는 Detail 화면의 타이틀 텍스트를 변경해봅시다. 이 화면의 타이틀 텍스트에는 라우터 파라미터로 받아온 id 값을 포함할 건데요. 라우터 파라미터를 참조할 때도 방금 한 것처럼 App 컴포넌트에서 Props로 설정할 수도 있고 useEffect를 사용해 화면으로 사용하는 컴포넌트에서 직접 설정할 수도 있습니다. 다만 App 컴포넌트에서 Props로 설정할 때 파라미터를 조회하려면 객체가 아닌 객체를 반환하는 함수를 넣어줘야 합니다. 그리고 이 함수는 route와 navigation을 파라미터로 받아올 수 있습니다.

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}
          options={({route}) => ({
            title: `상세 정보 - ${route.params.id}`,
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;