图片样式属性

示例

Image Resize Mode

Image Border

Image Border Radius

Image Tint

文档

Props

backfaceVisibility

这个属性定义了一个旋转后的图像的背面是否应该可见。

类型	默认值
enum('visible', 'hidden')	'visible'

---

backgroundColor

类型
color

---

borderBottomLeftRadius

Type
number

---

borderBottomRightRadius

Type
number

---

borderColor

Type
color

---

borderRadius

Type
number

---

borderTopLeftRadius

Type
number

---

borderTopRightRadius

Type
number

---

borderWidth

Type
number

---

opacity

为图像设置不透明度值。该数字应该在 0.0 到 1.0 的范围内。

Type	Default
number	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

类型
string

---

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

为所有非透明的像素指定一个颜色。

类型
color