더북(TheBook)

5.3.2.2 네이티브 스택 내비게이터와 하단 탭 내비게이터를 함께 사용하기

상황에 따라 여러 개의 내비게이터를 함께 사용할 수 있습니다. 현재 프로젝트의 화면 구성을 다음과 같이 설정해보겠습니다.

Stack.Navigator

- Main (Tab.Navigator)

• Home

• Search

• Notification

• Message

- Detail

Detail은 이전에 만든 컴포넌트를 재사용하겠습니다. 그리고 screens 디렉터리 안에 있는 HomeScreenHeaderlessScreen은 더 이상 사용하지 않으므로 삭제해도 됩니다.

우선 screens 디렉터리에 MainScreen 컴포넌트를 다음과 같이 생성하세요. 기존의 App.js에 있던 코드를 모두 복사해서 붙여넣은 뒤, 일부 코드만 조금 지우고 변경해주면 됩니다.