跳到主要内容

Image Style Props

示例

Image Resize Mode

Image Border

Image Border Radius

Image Tint

参考

Props

backfaceVisibility

此属性定义旋转图像的背面是否可见。

TypeDefault
enum('visible', 'hidden')'visible'

backgroundColor

Type
color

borderBottomLeftRadius

Type
number

borderBottomRightRadius

Type
number

borderColor

Type
color

borderRadius

Type
number

borderTopLeftRadius

Type
number

borderTopRightRadius

Type
number

borderWidth

Type
number

opacity

设置图像的不透明度值。该数字应在 0.01.0 的范围内。

TypeDefault
number1.0

overflow

TypeDefault
enum('visible', 'hidden')'visible'

overlayColor
Android

当图像具有圆角时,指定 overlayColor 会使角落中的剩余空间填充为纯色。这对于 Android 对圆角实现不支持的情况非常有用:

  • 某些调整大小模式,例如 'contain'
  • 动画 GIF

此 prop 的典型用法是将图像显示在纯色背景上,并将 overlayColor 设置为与背景相同的颜色。

有关其底层工作原理的详细信息,请参阅 Fresco 文档

Type
string

resizeMode

当帧与原始图像尺寸不匹配时,确定如何调整图像大小。默认为 cover

  • cover:以统一比例缩放图像(保持图像的宽高比),使得:

    • 图像的两个尺寸(宽度和高度)都等于或大于视图的对应尺寸(减去内边距)
    • 缩放后图像的至少一个尺寸等于视图的对应尺寸(减去内边距)
  • contain:以统一比例缩放图像(保持图像的宽高比),使得图像的两个尺寸(宽度和高度)都等于或小于视图的对应尺寸(减去内边距)。

  • stretch:独立缩放宽度和高度。这可能会改变 src 的宽高比。

  • repeat:重复图像以覆盖视图的帧。图像会保持其大小和宽高比,除非图像大于视图,此时会以统一比例缩小,使其包含在视图中。

  • center:在两个尺寸方向上将图像居中显示在视图中。如果图像大于视图,则以统一比例缩小,使其包含在视图中。

TypeDefault
enum('cover', 'contain', 'stretch', 'repeat', 'center')'cover'

objectFit

当帧与原始图像尺寸不匹配时,确定如何调整图像大小。

TypeDefault
enum('cover', 'contain', 'fill', 'scale-down')'cover'

tintColor

将所有非透明像素的颜色更改为 tintColor。

Type
color