리액트 네이티브 화면 구조

큰 구조

겉 모습 (레이아웃), 화면 전환 (네비게이션)을 묶은 구조로 구성

App
 └─ Navigation Container
     └─ Navigator (Stack / Tab / Drawer)
         ├─ Screen A
         │   └─ Layout(View, Text, Image ...)

 

- Screen 

하나의 화면

 

- Layout

화면 안의 배치

 

- Navigator

화면 전환 규칙

 

 

 

 

레이아웃 (Layout)

리액트 네이티브의 레이아웃은 웹의 CSS Flexbos 기반 (기본 방향은 세로)

 

- 주요 레이아웃 요소

View (div 같은 컨테이너)

Text (텍스트)

Image (이미지)

ScrollView (스크롤)

SafeAreaView (노치 / 상단바 안전영역)

KeyboardAvoidingView (키보드 올라올 때 화면 밀기)

 

- 레이아웃의 사고 방식

이 화면은 위에서 아래로 쌓인다

> 필요한 부분만 가로로 분리

 

 

 

 

 

화면 (Screen)

사용자가 인식하는 하나의 페이지

보통 파일 하나 = 화면 하나

 

 

 

 

네비게이션 (Navigation)

리액트 네이티브에는 기본 내장 네비게이션이 없음

보통 React Navigation 사용

 

- 대표적인 네비게이션 종류

Stack Navigation (화면이 위에 쌓이는 구조 / 뒤로가기 개념이 있음)

Tab Navigation (하단 탭 전환 / 화면 상태 유지)

Drawer Navigation (좌측 또는 우측에서 슬라이드 메뉴)

 

- 실제 앱에서의 사용

Tab 안에 Stack 구조가 가장 흔함

Tab
 ├─ HomeStack
 │   ├─ Home
 │   └─ Detail
 └─ MyPageStack
     ├─ MyPage
     └─ Settings

 

 

 

 

 

네비게이션 컨테이너

앱 전체에서 네비게이션 상태 관리

딱 한 번만 존재

보통 App.tsx와 동일한 최상단에 위치