레이아웃 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
AspectRatio — 크로스플랫폼 미디어 비율을 고정하는 AspectRatio
이미지·영상·지도 등 미디어 슬롯의 width/height 비율을 React Native aspectRatio 스타일로 유지하는 레이아웃 프리미티브입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
AspectRatio 사용 시점과 역할
AspectRatio는 부모 너비를 채우면서 ratio에 맞는 높이를 계산하도록 플랫폼 공통 View 스타일을 제공합니다. 값은 0보다 큰 유한수만 허용하고 잘못된 비율은 즉시 RangeError로 드러내며, style과 className으로 화면별 레이아웃을 덧붙일 수 있습니다.
- width/height 의미의 ratio 하나로 iOS·Android·Web 비율 통일
- 0 이하·Infinity·NaN 비율을 런타임에서 명확히 거부
- style·className·testID와 선택적 children 조합
설치와 최소 예제
AspectRatio: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { AspectRatio } from '@gj-kit/expo-ui';
<AspectRatio ratio={16 / 9}><Image source={cover} accessibilityLabel="여행 표지" /></AspectRatio>접근성과 플랫폼 동작
AspectRatio 자체는 의미 없는 View이며 이미지·영상 같은 children의 접근성 이름과 역할을 변경하지 않습니다. 비율은 시각적 레이아웃만 담당하므로 실제 미디어 설명은 내부 컴포넌트에 제공합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.