Getting Started
RN 화면의 조립층. design-system 위에 얹는다.
@coldsurfers/screens 는 화면 한 장이 어떻게 조립되는가를 드는 패키지입니다.
design-system 과 별개로 발행되고, 그 위에 얹힙니다.
design-system 무엇처럼 보이는가 토큰 · 프리미티브 · 단품
screens 어떻게 조립되는가 safe area · 탭바 여백 · 로딩 경계판별은 한 줄입니다.
화면 전체의 배치를 정하면 여기, 그 안의 한 칸이면 design-system.
그래서 TabBar 는 단품이라 design-system 에 남고, 그 탭바만큼 아래를
비우는 AppScreen 은 여기입니다.
왜 design-system 안이 아닌가
이 층이 자라면 내비게이션 프레임워크를 뭅니다. 화면 헤더는 react-navigation 의
NativeStackHeaderProps 를 받는 자리고, 그 축이 design-system 계약에 들어오면 웹 소비자까지
내비게이션 라이브러리를 지게 됩니다.
같은 이유로 @seed-design/stackflow 가 @seed-design/react 코어 밖에 있습니다. 갈린 기준은
"셸이냐 프리미티브냐" 가 아니라 프레임워크 의존입니다.
설치
pnpm add @coldsurfers/screenspeer 는 전부 필수입니다 — design-system 과 달리 이 패키지는 RN 전용이라 안 쓰는 레인이 없습니다.
| peer | 왜 |
|---|---|
@coldsurfers/surf-ui | 색 · 타이포 · useTabBarHeight() |
react-native-safe-area-context | 인셋 |
@emotion/native · @emotion/react | 스타일 엔진 |
design-system 을 `dependencies` 로 넣지 마세요
사본이 둘이 되면 useScheme() 이 다른 컨텍스트를 읽습니다. 마이크로프론트엔드로 원격
번들을 얹는 앱에서는 호스트가 노출한 한 벌을 써야 합니다.
import 경로
배럴(.)과 표면별 진입점 둘 다 열려 있습니다.
import { AppScreen } from '@coldsurfers/screens/AppScreen'진입점으로 여는 편이 낫습니다. Metro 는 tree-shaking 을 하지 않아 배럴을 열면 이 패키지가 가진 것이 전부 딸려옵니다. 배럴을 남겨 둔 건 빼면 major 이기 때문입니다.