Shadow Props

TypeScript

JavaScript

---

참조

React Native에는 세 가지 유형의 그림자 API가 있다:

• boxShadow: View 스타일 프로퍼티로, 동일한 이름의 웹 스타일 프로퍼티를 스펙에 맞게 구현한 것이다.
• dropShadow: filter View 스타일 프로퍼티의 일부로 제공되는 특정 필터 함수다.
• 다양한 shadow 프로퍼티 (shadowColor, shadowOffset, shadowOpacity, shadowRadius): 이 프로퍼티들은 플랫폼 수준의 API에서 제공하는 네이티브 프로퍼티와 직접 매핑된다.

dropShadow와 boxShadow의 차이점은 다음과 같다:

• dropShadow는 filter의 일부로 존재하지만, boxShadow는 독립적인 스타일 프로퍼티다.
• dropShadow는 알파 마스크이기 때문에, 양의 알파 값을 가진 픽셀만 그림자를 '드리운다'. 반면 boxShadow는 엘리먼트의 내용과 상관없이 테두리 상자 주변에 그림자를 드리운다(단, inset인 경우 제외).
• dropShadow는 안드로이드에서만 사용 가능하지만, boxShadow는 iOS와 안드로이드 모두에서 사용 가능하다.
• dropShadow는 boxShadow처럼 inset 설정이 불가능하다.
• dropShadow는 boxShadow와 달리 spreadDistance 인자를 지원하지 않는다.

일반적으로 boxShadow와 dropShadow는 shadow 프로퍼티보다 더 많은 기능을 제공한다. 하지만 shadow 프로퍼티는 네이티브 플랫폼 수준의 API와 직접 매핑되기 때문에, 단순한 그림자만 필요하다면 이 프로퍼티를 사용하는 것이 좋다. 단, shadowColor는 안드로이드와 iOS 모두에서 동작하지만, 다른 shadow 프로퍼티들은 iOS에서만 동작한다는 점에 유의해야 한다.

Props

boxShadow

View Style Props 문서를 참고하세요.

dropShadow

Android

문서는 View Style Props에서 확인할 수 있다.

shadowColor

드롭 섀도우의 색상을 설정한다.

이 속성은 Android API 28 이상에서만 동작한다. 더 낮은 Android API 버전에서 비슷한 기능을 구현하려면 elevation 속성을 사용한다.

타입
color

shadowOffset

iOS

드롭 섀도우의 오프셋을 설정한다.

타입
객체: {width: number,height: number}

shadowOpacity

iOS

드롭 섀도우의 불투명도를 설정한다. 이 값은 색상의 알파(alpha) 컴포넌트와 곱해진다.

타입
number

shadowRadius

iOS

드롭 섀도우의 흐림 반경을 설정한다.

타입
number