跳到主要内容

Image Style Props

示例

图片缩放模式

图片边框

图片圆角

图片着色

参考文档

Props

backfaceVisibility

该属性定义旋转后的图片背面是否可见。

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

backgroundColor

类型
color

borderBottomLeftRadius

类型
number

borderBottomRightRadius

类型
number

borderColor

类型
color

borderRadius

类型
number

borderTopLeftRadius

类型
number

borderTopRightRadius

类型
number

borderWidth

类型
number

opacity

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

类型默认值
number1.0

overflow

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

overlayColor
Android

当图片有圆角时,指定 overlayColor 会使圆角处的剩余空间填充为纯色。这在 Android 圆角实现不支持的场景中很有用:

  • 某些缩放模式,如 'contain'
  • 动画 GIF

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

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

类型
string

resizeMode

决定当图片框架与原始图片尺寸不匹配时如何调整图片大小。默认为 cover

  • cover:等比缩放图片(保持图片宽高比),使得:

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

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

  • repeat:重复图片以覆盖视图的整个框架。图片会保持其原始大小和宽高比,除非图片大于视图,此时会等比缩小以适应视图。

  • center:在两个方向上将图片居中于视图。如果图片大于视图,则等比缩小以适应视图。

类型默认值
enum('cover', 'contain', 'stretch', 'repeat', 'center')'cover'

objectFit

决定当图片框架与原始图片尺寸不匹配时如何调整图片大小。

类型默认值
enum('cover', 'contain', 'fill', 'scale-down')'cover'

tintColor

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

类型
color