StackHorizontal

Stack.Horizontal은 자식 요소를 가로로 쌓아 배치하는 컴포넌트에요. 이 컴포넌트를 사용하면, 자식 요소 간의 간격을 gutter 속성으로 쉽게 조절할 수 있어, 가로 방향으로 일관된 레이아웃을 유지할 수 있어요.

시그니처

StackHorizontal: import("react").ForwardRefExoticComponent<StackWithoutDirectionProps & import("react").RefAttributes<View>>

파라미터

• propsobject
  

  컴포넌트에 전달되는 props 객체예요.

  • props.align'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' · 'stretch'
    

    자식 요소의 가로 정렬을 설정하는 값이에요. Flexbox의 align-items 속성과 동일하게 동작하며, 기본값은 'stretch'로 자식 요소의 폭이 'auto'인 경우 부모의 너비에 맞춰 늘어나요.

  • props.justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' · 'flex-start'
    

    자식 요소의 가로 정렬을 설정하는 값이에요. Flexbox의 justify-content 속성과 동일하게 동작하며, 기본값은 'flex-start'로 자식 요소들이 위쪽에 정렬돼요.

  • props.gutternumber | ReactElement
    

    자식 요소 간의 간격을 설정하는 값이에요. 숫자를 입력하면 픽셀 단위로 여백을 설정하고, ReactElement를 전달하면 해당 컴포넌트가 간격으로 사용돼요. 숫자를 사용하면 간격을 정확하게 제어할 수 있고, ReactElement를 사용하면 더 복잡한 커스텀 간격을 구현할 수 있어요.

예제

가로 방향으로 요소들을 배치하고, 간격을 16으로 설정한 예제예요.

import { Stack } from '@granite-js/react-native';
import { View, Text } from 'react-native';

function StackHorizontalExample() {
  return (
       <Stack.Horizontal gutter={16}>
        <Text>16간격을 두고 가로 방향으로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack.Horizontal>
  );
}