이미지 리사이즈 모드
이미지 테두리
이미지 테두리 둥글게 만들기
이미지 틴트
참조
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를 지정하면 모서리의 남은 공간이 단색으로 채워진다. 이 기능은 안드로이드에서 둥근 모서리를 구현할 때 지원되지 않는 경우에 유용하다:
'contain'과 같은 특정 리사이즈 모드- 애니메이션 GIF
이 속성은 일반적으로 단색 배경 위에 이미지를 표시할 때 사용하며, overlayColor를 배경색과 동일하게 설정한다.
내부적으로 이 기능이 어떻게 동작하는지 자세히 알고 싶다면 Fresco 문서를 참고한다.
resizeMode
이미지의 원본 크기와 프레임 크기가 일치하지 않을 때, 이미지를 어떻게 조정할지 결정한다. 기본값은 cover이다.
-
cover: 이미지의 가로세로 비율을 유지하면서 균일하게 크기를 조정한다. 이때:
- 이미지의 가로와 세로 크기는 모두 뷰의 해당 크기(패딩을 뺀 값)보다 크거나 같아진다.
- 크기가 조정된 이미지의 가로 또는 세로 중 하나는 뷰의 해당 크기(패딩을 뺀 값)와 동일해진다.
-
contain: 이미지의 가로세로 비율을 유지하면서 균일하게 크기를 조정한다. 이때 이미지의 가로와 세로 크기는 모두 뷰의 해당 크기(패딩을 뺀 값)보다 작거나 같아진다.
-
stretch: 가로와 세로 크기를 독립적으로 조정한다. 이때 이미지의 가로세로 비율이 변경될 수 있다.
-
repeat: 이미지를 반복하여 뷰의 프레임을 채운다. 이미지는 원래 크기와 가로세로 비율을 유지하지만, 뷰보다 큰 경우 균일하게 축소되어 뷰 안에 포함된다.
-
center: 이미지를 뷰의 가운데에 위치시킨다. 이미지가 뷰보다 큰 경우 균일하게 축소되어 뷰 안에 포함된다.
| 타입 | 기본값 |
|---|
enum('cover', 'contain', 'stretch', 'repeat', 'center') | 'cover' |
objectFit
이미지 프레임과 원본 이미지의 크기가 일치하지 않을 때, 이미지를 어떻게 조정할지 결정한다.
| 타입 | 기본값 |
|---|
열거형('cover', 'contain', 'fill', 'scale-down') | 'cover' |
tintColor
투명하지 않은 모든 픽셀의 색상을 tintColor로 변경한다.