StackVertical

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

시그니처

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

파라미터

• propsobject
  

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

  • props.alignstring · 'stretch'
    

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

  • props.justifystring · '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';

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

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