FlexCenter

Flex.Center는 자식 요소들을 Flexbox 레이아웃 기준으로 가로와 세로 모두 정 중앙에 배치하는 컴포넌트예요. alignItems와 justifyContent 속성 모두 'center'로 설정되어, 자식 요소들이 부모 컴포넌트의 중앙에 배치돼요. Flexbox를 사용해 중앙 정렬을 간편하게 할 수 있어요.

시그니처

FlexCenter: 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' · 'center'
    

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

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

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

  • props.styleViewProps['style']
    

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

예제

요소를 정 중앙에 배치하는 예제예요.

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

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