跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >

图片样式属性

示例

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.01.0 的范围内。

TypeDefault
number1.0

overflow

TypeDefault
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