이미지 크기 조정 모드
이미지 테두리
이미지 테두리 둥글게 만들기
이미지 색상 조정
참조
Props
backfaceVisibility
이 속성은 회전된 이미지의 뒷면이 보이는지 여부를 정의한다.
| 타입 | 기본값 |
|---|
enum('visible', 'hidden') | 'visible' |
backgroundColor
borderBottomLeftRadius
borderBottomRightRadius
borderColor
borderRadius
borderTopLeftRadius
borderTopRightRadius
borderWidth
opacity
이미지의 투명도를 설정한다. 값은 0.0부터 1.0 사이의 숫자로 지정한다.
overflow
| 타입 | 기본값 |
|---|
enum('visible', 'hidden') | 'visible' |
overlayColor
Android
이미지에 둥근 모서리를 적용할 때 overlayColor를 지정하면 모서리의 남은 공간이 단색으로 채워진다. 이 기능은 Android에서 둥근 모서리를 구현할 때 지원되지 않는 경우에 유용하다:
'contain'과 같은 특정 리사이즈 모드- 애니메이션 GIF
이 속성은 일반적으로 단색 배경 위에 이미지를 표시할 때 사용하며, overlayColor를 배경색과 동일하게 설정한다.
내부적으로 어떻게 동작하는지 자세히 알고 싶다면 Fresco 문서를 참고한다.
resizeMode
이미지의 원본 크기와 프레임 크기가 일치하지 않을 때 이미지를 어떻게 조정할지 결정한다. 기본값은 cover이다.
-
cover: 이미지의 비율을 유지하면서 균일하게 확대 또는 축소한다. 이때:
- 이미지의 너비와 높이가 뷰의 해당 차원(패딩 제외)보다 크거나 같아야 한다.
- 확대 또는 축소된 이미지의 적어도 하나의 차원은 뷰의 해당 차원(패딩 제외)과 같아야 한다.
-
contain: 이미지의 비율을 유지하면서 균일하게 확대 또는 축소한다. 이때 이미지의 너비와 높이가 뷰의 해당 차원(패딩 제외)보다 작거나 같아야 한다.
-
stretch: 너비와 높이를 독립적으로 조정한다. 이 경우 이미지의 원래 비율이 변경될 수 있다.
-
repeat: 이미지를 반복하여 뷰의 프레임을 채운다. 이미지는 원래 크기와 비율을 유지하지만, 뷰보다 큰 경우 균일하게 축소되어 뷰 안에 포함된다.
-
center: 이미지를 뷰의 중앙에 위치시킨다. 이미지가 뷰보다 큰 경우 균일하게 축소하여 뷰 안에 포함시킨다.
| 타입 | 기본값 |
|---|
enum('cover', 'contain', 'stretch', 'repeat', 'center') | 'cover' |
objectFit
프레임과 원본 이미지의 크기가 일치하지 않을 때 이미지를 어떻게 조정할지 결정한다.
| 타입 | 기본값 |
|---|
enum('cover', 'contain', 'fill', 'scale-down') | 'cover' |
tintColor
투명하지 않은 모든 픽셀의 색상을 tintColor로 변경한다.