FlexCenterHorizontal

Flex.CenterHorizontal는 자식 요소들을 Flexbox 레이아웃 기준으로 가로 방향으로 중앙에 정렬하기 위한 컴포넌트예요. alignItems 속성이 'center'로 설정되어, 자식 요소들이 부모 컴포넌트의 가로 중앙에 배치돼요.

시그니처

FlexCenterHorizontal: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>

파라미터

• propsobject
  

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

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

    중심축 기준(Flex 방향)으로 자식 요소를 정렬하는 설정 값이에요. 'column' 방향을 예로 들어, 'center'는 수평 중앙에 배치하고, 'stretch'는 요소의 폭이 'auto'인 경우 부모의 폭에 맞게 늘려요. 이 값은 `alignItems`에 적용되며, 기본값은 'center'예요.

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

    교차축(Flex 방향의 교차 방향) 기준으로 자식 요소를 정렬하는 설정 값이에요. 'column' 방향을 예로 들어, flex-start는 요소를 부모의 위쪽에 배치하고, 'center'는 부모의 수직 중앙에 배치해요. 이 값은 `justifyContent`에 적용되며, 기본값은 'flex-start'예요.

  • props.direction'column' | 'row' · 'column'
    

    자식 요소들이 배치될 방향을 설정하는 값이에요. 기본값은 'column'으로 세로 방향으로 배치돼요.

  • props.styleViewProps['style']
    

    Flex.CenterHorizontal 컴포넌트에 적용할 style 객체예요. Flexbox 레이아웃 외에 컴포넌트의 배경색, 테두리, 여백 등 다른 스타일을 지정할 때 사용해요. 기본값은 undefined에요.

예제

가로 방향으로 요소들을 중앙 정렬하는 예제예요.

import { Flex } from '@granite-js/react-native';
import { Text } from 'react-native';

function FlexCenterHorizontalExample() {
  return (
    <Flex.CenterHorizontal style={{ width: '100%', height: 100, borderWidth: 1 }}>
      <Text>가로 중앙에 배치해요</Text>
    </Flex.CenterHorizontal>
  );
}