Expo Router Tutorial - 10 - Stack Navigation
- Expo Router를 사용한 Stack Navigation 구현 방법을 자세히 설명합니다. ➡️
- Stack Navigation의 기본 개념과 작동 방식을 카드 더미에 비유하여 쉽게 이해하도록 합니다. 🃏
npx create-expo-app
명령어를 사용하여 새로운 프로젝트 생성 및 설정 방법을 안내합니다. 💻
app.tsx
파일에서 Stack 컴포넌트를 이용한 간단한 Stack Navigation 설정 방법을 보여줍니다. 🧱
- 새로운 페이지 추가 및 링크 연결을 통해 Stack Navigation의 동작을 직접 확인하는 실습 과정을 제공합니다. 🔗
stack.screen
컴포넌트를 사용하여 개별 화면의 스타일 및 옵션(제목, 헤더 스타일, 왼쪽/오른쪽 요소 추가 등)을 커스터마이징하는 방법을 설명합니다.🎨
headerStyle
, headerTintColor
, headerTitleStyle
등의 속성을 활용하여 헤더의 스타일을 변경하는 방법을 보여줍니다. 🖌️
headerLeft
, headerRight
옵션을 사용하여 헤더에 사용자 정의 컴포넌트를 추가하는 방법을 예시와 함께 설명합니다. ➕
screenOptions
prop을 사용하여 Stack 내 모든 화면에 일관된 스타일을 적용하는 방법을 제시합니다. 🖼️