Skip to main content

图片样式属性

示例​

¥Examples

图片调整大小模式​

¥Image Resize Mode

图片边框​

¥Image Border

图片边框半径​

¥Image Border Radius

图片色调​

¥Image Tint

参考

¥Reference

属性​

¥Props

backfaceVisibility​

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

¥The property defines whether or not the back face of a rotated image should be visible.

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

backgroundColor​

类型
color

borderBottomLeftRadius​

类型
number

borderBottomRightRadius​

类型
number

borderColor​

类型
color

borderRadius​

类型
number

borderTopLeftRadius​

类型
number

borderTopRightRadius​

类型
number

borderWidth​

类型
number

opacity​

设置图片的不透明度值。编号应在 0.0 至 1.0 范围内。

¥Set an opacity value for the image. The number should be in the range from 0.0 to 1.0.

类型默认
number1.0

overflow​

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

overlayColor
Android
​

当图片有圆角时，指定 overlayColor 将导致角中的剩余空间被纯色填充。这在 Android 圆角实现不支持的情况下很有用：

¥When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners:

  • 某些调整大小模式，例如 'contain'

    ¥Certain resize modes, such as 'contain'

  • GIF 动画

    ¥Animated GIFs

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

¥A typical way to use this prop is with images displayed on a solid background and setting the overlayColor to the same color as the background.

有关其内部工作原理的详细信息，请参阅 Fresco 文档。

¥For details of how this works under the hood, see Fresco documentation.

类型
string

resizeMode​

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

¥Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover.

  • cover：均匀缩放图片（保持图片的纵横比），以便：

    ¥cover: Scale the image uniformly (maintain the image's aspect ratio) so that:

    • 图片的两个尺寸（宽度和高度）将等于或大于视图的相应尺寸（减去填充）

      ¥Both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)

    • 缩放图片的至少一维将等于视图的相应尺寸（减去填充）

      ¥At least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)

  • contain：均匀缩放图片（保持图片的纵横比），使图片的两个尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）。

    ¥contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

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

    ¥stretch: Scale width and height independently, This may change the aspect ratio of the src.

  • repeat：重复图片以覆盖视图的框架。图片将保持其大小和纵横比，除非它大于视图，在这种情况下，它将均匀缩小，以便包含在视图中。

    ¥repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

  • center：将图片在视图中沿两个维度居中。如果图片比视图大，则均匀缩小图片以使其包含在视图中。

    ¥center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

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

objectFit​

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

¥Determines how to resize the image when the frame doesn't match the raw image dimensions.

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

tintColor​

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

¥Changes the color of all the non-transparent pixels to the tintColor.

类型
color