Image Resize Mode
Image Border
Image Border Radius
Image Tint
文档
Props
backfaceVisibility
这个属性定义了一个旋转后的图像的背面是否应该可见。
类型 | 默认值 |
---|
enum('visible' , 'hidden' ) | 'visible' |
backgroundColor
borderBottomLeftRadius
borderBottomRightRadius
borderColor
borderRadius
borderTopLeftRadius
borderTopRightRadius
borderWidth
opacity
为图像设置不透明度值。该数字应该在 0.0
到 1.0
的范围内。
overflow
Type | Default |
---|
enum('visible' , 'hidden' ) | 'visible' |
overlayColor
Android
当图片有圆角的时候,指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的,但在某些情况下,Android 并不支持圆角透明,比如:
- 某些 resize 模式比如'contain'
- GIF 动画
常见的用法就是在不能圆角透明时,设置overlayColor
和背景色一致。
详细说明可参考 https://frescolib.org/docs/rounded-corners-and-circles.html
resizeMode
当框架与原始图像尺寸不匹配时如何调整图像大小。默认值为 cover
。
-
cover
:均匀缩放图像(保持图像的纵横比)使得:
- 图像的两个尺寸(宽度和高度)都将等于或大于视图的相应尺寸(减去padding)
- 至少有一个缩放后的图像尺寸将等于视图的相应尺寸(减去padding)
-
contain
:均匀缩放图像(保持图像的纵横 比),这样图像的两个尺寸(宽度和高度)都将等于或小于视图的相应尺寸(减去padding)。
-
stretch
:独立缩放宽度和高度,这可能会改变src的纵横比。
-
repeat
:重复图像以覆盖视图的框架。图像将保持其大小和纵横比,除非它大于视图,在这种情况下,它将均匀缩小以适合视图。
-
center
:在两个维度上将图像居中在视图中。如果图像大于视图,则均匀缩小以适应视图。
类型 | 默认值 |
---|
enum('cover' , 'contain' , 'stretch' , 'repeat' , 'center' ) | 'cover' |
objectFit
当框架与原始图像尺寸不匹配时如何调整图像大小。
类型 | 默认值 |
---|
enum('cover' , 'contain' , 'fill' , 'scale-down' ) | 'cover' |
tintColor
为所有非透明的像素指定一个颜色。