다음으로 App.js 파일에서 네이티브 스택 내비게이터를 설정한 뒤에 MainScreen과 DetailScreen 컴포넌트를 추가해주겠습니다.

App.js

import React from 'react';
import {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 App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

여기까지 코드를 입력하면 하단 탭과 네이티브 스택을 같이 사용하는 예시가 완성됩니다. HomeScreen에서 Detail 1 열기 버튼을 눌러보세요. DetailScreen이 탭 내비게이터를 가리고 새로 보여졌나요?

네이티브 스택 내비게이터에서 MainScreen의 화면을 설정할 때, options에 headerShown 값을 false로 해주었는데요. 만약 이 값을 설정하지 않는다면 두 개의 헤더가 나타나는 문제가 발생하므로, 하단 탭 내비게이터를 네이티브 스택 내비게이터 내부에서 사용하게 될 때 이 설정을 해주는 것이 중요합니다.