Skip to main content
Version: Next

StyleSheet는 CSS StyleSheets와 유사한 추상화 개념이다.

코드 품질을 높이는 팁:

  • 스타일을 렌더 함수 밖으로 분리하면 코드를 더 이해하기 쉽게 만들 수 있다.
  • 스타일에 이름을 붙이는 것은 렌더 함수 내의 저수준 컴포넌트에 의미를 부여하고 재사용을 촉진하는 좋은 방법이다.
  • 대부분의 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;

스타일을 생성하는 데 사용되는 identity 함수이다. 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'와 함께 left: 0, right: 0, top: 0, bottom: 0을 사용하는 패턴은 매우 일반적이다. 이러한 반복되는 스타일을 간편하게 사용하고 중복을 줄이기 위해 absoluteFill을 활용할 수 있다. 필요에 따라 absoluteFill을 사용해 StyleSheet에 커스텀 엔트리를 생성할 수도 있다. 예를 들면 다음과 같다:

absoluteFillObject​

absoluteFill을 사용하지만 약간의 수정이 필요할 때, absoluteFillObject를 사용해 StyleSheet에 커스텀 항목을 만들 수 있다. 예를 들어:

hairlineWidth​

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

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

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