React Navigation
개요
React Navigation을 사용하여 네비게이션 UI를 구축하기 위한 가이드입니다.
이 스킬은 React Navigation 7에만 적용됩니다. API와 패턴이 다른 버전에서는 작동하지 않을 수 있습니다.
API 선택
React Navigation은 객체 기반의 Static API와 컴포넌트 기반의 Dynamic API를 제공합니다.
- 기존 앱: 현재 네비게이션 설정을 확인하고, 참조를 사용할 때 동일한 API 스타일을 따르세요.
- 새 앱: 앱에 기존 네비게이션 설정이 없는 경우
Static API를 선호하세요.
적용 시점
다음과 같은 상황에서 이 스킬을 참조하세요:
- 스택, 탭, 드로어, 시트 등 네비게이션 UI 패턴 구축
- 헤더 및 기타 내장 네비게이터 UI 구성
- 네비게이션 UI에서 안전 영역 및 인세트 처리
참조
| 파일 | 설명 |
|---|---|
| stacks.md | 스택 기반 네비게이션 |
| form-sheet.md | 바텀 시트 및 폼 시트 |
| bottom-tabs.md | 크로스 플랫폼 바텀 탭 |
| native-bottom-tabs.md | 네이티브 바텀 탭 |
| material-top-tabs.md | 스와이프 가능한 상단 탭 |
| drawers.md | 드로어 네비게이션 및 사이드바 |
| header.md | 헤더 구성 |
| safe-areas.md | 안전 영역 처리 |
문제 -> 스킬 매핑
| 문제 | 시작 지점 |
|---|---|
| 스택에서 화면 및 모달 표시 | stacks.md |
| 바텀 시트 또는 폼 시트 표시 | form-sheet.md |
| 바텀 탭 또는 웹 지원이 있는 반응형 사이드바에 화면 표시 | bottom-tabs.md |
| iOS 및 Android에서 네이티브 탭에 화면 표시 | native-bottom-tabs.md |
| 스와이프 가능한 상단 탭에 콘텐츠 표시 | material-top-tabs.md |
| 드로어 또는 사이드바 사용 | drawers.md |
| 바텀 탭 또는 드로어 네비게이터의 헤더 구성 | header.md |
| 상태 표시줄, 헤더 인세트, 탭 바 인세트 등 안전 영역 처리 | safe-areas.md |