더북(TheBook)

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

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

Stack.Navigator

- Main (Tab.Navigator)

• Home

• Search

• Notification

• Message

- Detail

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

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

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.