Skip to main content

스타일시트는 CSS 스타일시트와 유사한 추상화 개념이다.

코드 품질 향상을 위한 팁:

  • 스타일을 렌더 함수 밖으로 분리하면 코드를 더 쉽게 이해할 수 있다.
  • 스타일에 이름을 붙이면 렌더 함수 내의 저수준 컴포넌트에 의미를 부여할 수 있으며, 재사용성을 높일 수 있다.
  • 대부분의 IDE에서 StyleSheet.create()를 사용하면 정적 타입 검사와 제안 기능을 활용해 유효한 스타일을 작성할 수 있다.

참조

메서드​

compose()​

tsx
static compose(style1: Object, style2: Object): Object | Object[];

두 스타일을 결합하여 style2가 style1의 스타일을 덮어쓰게 한다. 두 스타일 중 하나가 falsy 값이면, 다른 하나를 반환하며 배열을 할당하지 않아 메모리 사용을 줄이고 PureComponent 검사를 위한 참조 동일성을 유지한다.

create()​

tsx
static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;

스타일을 생성하기 위한 항등 함수다. StyleSheet.create() 내부에서 스타일을 생성할 때의 주요 실질적인 이점은 네이티브 스타일 속성에 대한 정적 타입 검사가 가능하다는 점이다.

flatten()​

tsx
static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;

스타일 객체 배열을 하나의 통합된 스타일 객체로 병합한다.

setStyleAttributePreprocessor()​

경고: 실험적 기능. 주요 변경 사항이 자주 발생할 수 있으며, 이에 대한 안내가 항상 제공되지는 않습니다. 이 기능이 아예 삭제될 수도 있습니다. 사용에 따른 책임은 본인에게 있습니다.

tsx
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);

스타일 속성 값을 전처리하는 함수를 설정한다. 이 기능은 내부적으로 색상과 변환 값을 처리할 때 사용된다. 다른 방법을 모두 시도해보고 정말로 필요할 때만 사용해야 한다. 이 기능을 사용하려면 해당 동작을 완벽히 이해하고 있어야 한다.

속성​

absoluteFill​

오버레이를 만들 때 position: 'absolute'와 함께 상하좌우를 0으로 설정하는 패턴(position: 'absolute', left: 0, right: 0, top: 0, bottom: 0)은 매우 흔히 사용된다. absoluteFill은 이러한 반복적인 스타일을 간편하게 적용하고 중복을 줄이기 위해 사용된다. 필요에 따라 absoluteFill을 사용해 StyleSheet에 커스텀 엔트리를 만들 수도 있다. 예를 들면 다음과 같다:

absoluteFillObject​

종종 absoluteFill을 사용하지만 약간의 조정이 필요할 때가 있다. absoluteFillObject는 StyleSheet에서 커스텀 항목을 생성하는 데 사용할 수 있다. 예를 들어:

hairlineWidth​

이 값은 플랫폼에서 얇은 선의 두께를 정의한다. 주로 두 엘리먼트 사이의 경계선이나 구분선의 두께로 사용된다. 예를 들면 다음과 같다:

이 상수는 항상 픽셀 단위의 정수 값을 가지며, 플랫폼의 표준 얇은 선 두께와 일치하도록 설계되었다. 하지만 이 값이 항상 동일하다고 가정해서는 안 된다. 플랫폼과 화면 밀도에 따라 계산 방식이 다를 수 있기 때문이다.

시뮬레이터가 축소된 상태라면 hairlineWidth로 정의된 선이 보이지 않을 수도 있다.