Spacing

Spacing은 빈 공간을 차지해서 여백을 추가하는 컴포넌트예요. 가로 혹은 세로 방향으로 여백의 크기를 지정할 수 있어요.

시그니처

Spacing: import("react").NamedExoticComponent<Props>

파라미터

• propsobject
  

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

  • props.size필수 · number
    

    여백의 크기를 설정하는 숫자 값이에요.

  • props.direction'vertical' | 'horizontal' · 'vertical'
    

    여백을 차지할 방향을 설정해요. 기본값은 'vertical'이에요.

  • props.styleStyleProp<ViewStyle>
    

    Spacing 컴포넌트에 적용할 style 값이에요. 기본값은 undefined이고, 추가 스타일을 적용할 때 사용돼요.

예제

가로, 세로 방향에 크기가 16인 여백을 추가하여 빈 공간을 만들어 낸 예제

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

export function SpacingExample() {
  return (
    <View>
      <Text>Top</Text>
      <Spacing size={16} direction="vertical" style={{ backgroundColor: 'red', width: 5 }} />
      <Text>Bottom, 세로 여백만큼 아래에 위치해 있어요</Text>

      <View style={{ flexDirection: 'row' }}>
        <Text>Left</Text>
        <Spacing size={16} direction="horizontal" style={{ backgroundColor: 'red', height: 5 }} />
        <Text>Right, 가로 여백만큼 옆에 위치해 있어요</Text>
      </View>
    </View>
  );
}