Screen

<Screen>은 라우트 element를 감싸는 컨테이너예요. fixed 레이아웃에 앱 바·네비게이션 바·상태 바 같은 모바일 화면 영역의 슬롯을 함께 가지고 있어요.

구조

Status Bar

App Bar

Children스크롤 영역

Navigation Bar

System Navigation Bar

Status Bar: 상단 안전 영역. 노치·다이내믹 아일랜드를 차지해요.; statusBarHeightstatusBarColorhideStatusBar
App Bar: 화면 상단의 헤더 영역. 화면별로 두거나 화면 사이에서 그대로 유지되는 공유로 둘 수 있어요.; appBarsharedAppBar
Children: 화면의 본문 영역. 기본으로 스크롤되며, 자체 스크롤 컨테이너를 쓸 때만 꺼요.; contentScrollable
Navigation Bar: 화면 하단의 바. App Bar와 마찬가지로 화면별·공유 둘 다 가능해요.; navigationBarsharedNavigationBar
System Navigation Bar: 하단 안전 영역. 안드로이드 시스템 네비게이션 자리를 차지해요.; systemNavigationBarHeightsystemNavigationBarColorhideSystemNavigationBar

화면별 vs 공유 (shared)

App bar와 navigation bar는 두 가지 방식으로 둘 수 있어요. 각각 다른 시점에 마운트되고, 전환할 때 다르게 보여요.

appBar / navigationBar — 그 화면에만 속한 바예요. 화면이 바뀌면 함께 마운트됐다가 같이 사라져요. 헤더 타이틀이나 상세 화면의 액션 버튼처럼 화면마다 다른 UI에 어울려요.
sharedAppBar / sharedNavigationBar — 화면이 바뀌어도 같은 자리에 그대로 머물러요. push/pop 전환 동안 깜빡이지 않고, 모든 화면에 같이 보여야 하는 하단 탭 바·고정 헤더 같은 UI에 어울려요. 같은 노드를 다음 화면에서도 같은 prop으로 넘기면 flemo가 두 화면 사이를 이어 그려요.

가장 작은 사용

<Screen>
  <h1>Home</h1>
</Screen>

기본적으로 컨텐츠 영역은 스크롤돼요. 배경색은 따로 지정하지 않으면 흰색이에요.

앱 바와 네비게이션 바

각 슬롯은 두 가지가 있어요. 화면별(appBar, navigationBar)과 공유(sharedAppBar, sharedNavigationBar).

공유 버전은 화면이 바뀌어도 그대로 유지되기 때문에, 모든 화면에서 보여야 하는 하단 탭 바 같은 UI에 어울려요.

<Screen
  appBar={<TopBar title="받은편지함" />}
  navigationBar={<BottomActions />}
  sharedNavigationBar={<TabBar />}
>
  <MailList />
</Screen>

안전 영역

<Screen
  statusBarHeight="env(safe-area-inset-top)"
  statusBarColor="#000"
  systemNavigationBarHeight="env(safe-area-inset-bottom)"
  systemNavigationBarColor="#000"
>
  …
</Screen>

해당 영역을 차지하지 않게 하려면 hideStatusBar 또는 hideSystemNavigationBar를 켜요.

배경색

<Screen backgroundColor="#0b0b0c">…</Screen>

기본값은 "white"예요. CSS 색이면 무엇이든 사용할 수 있어요.

컨텐츠 스크롤 끄기

자체 스크롤 컨테이너를 쓴다면 내장 스크롤을 꺼요.

<Screen contentScrollable={false}>
  <CustomScrollArea />
</Screen>

Screen 전체 prop

Prop	타입	기본값	설명
`appBar`	`ReactNode`	—	화면별 상단 바
`navigationBar`	`ReactNode`	—	화면별 하단 바
`sharedAppBar`	`ReactNode`	—	전환에서도 유지되는 상단 바
`sharedNavigationBar`	`ReactNode`	—	전환에서도 유지되는 하단 바
`backgroundColor`	`string`	`"white"`	CSS 색
`statusBarHeight`	`string`	—	CSS 길이, 보통 `env(safe-area-inset-top)`
`statusBarColor`	`string`	—	CSS 색
`hideStatusBar`	`boolean`	`false`	상단 안전 영역을 차지하지 않음
`systemNavigationBarHeight`	`string`	—	CSS 길이, 보통 `env(safe-area-inset-bottom)`
`systemNavigationBarColor`	`string`	—	CSS 색
`hideSystemNavigationBar`	`boolean`	`false`	하단 안전 영역을 차지하지 않음
`contentScrollable`	`boolean`	`true`	컨텐츠 영역의 스크롤 여부

공유 요소 모핑

목록의 썸네일이 다음 화면의 큰 이미지로 자연스럽게 펼쳐져야 한다면 <LayoutScreen>을 쓰세요 — @flemo/react-layout이 제공하는 <Screen>의 대체품으로, motion의 layout 엔진을 통해 두 화면의 요소를 짝지어 줘요. 전체 사용법은 LayoutScreen 페이지를 참고하세요.

이 페이지에서