Saltar al contenido principal

Propiedades de estilo de imagen

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Ejemplos

Modo de redimensionamiento de imagen

Borde de imagen

Radio del borde de imagen

Tinte de imagen

Referencia

Props

backfaceVisibility

Esta propiedad define si la cara posterior de una imagen rotada debe ser visible o no.

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

Establece un valor de opacidad para la imagen. El número debe estar en el rango de 0.0 a 1.0.

TypeDefault
number1.0

overflow

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

overlayColor
Android

Cuando la imagen tiene esquinas redondeadas, especificar un overlayColor hará que el espacio restante en las esquinas se llene con un color sólido. Esto es útil en casos no soportados por la implementación de Android para esquinas redondeadas:

  • Ciertos modos de redimensionamiento, como 'contain'

  • GIFs animados

Una forma típica de usar esta propiedad es con imágenes mostradas sobre un fondo sólido, estableciendo el overlayColor al mismo color del fondo.

Para detalles sobre cómo funciona internamente, consulta la documentación de Fresco.

Type
string

resizeMode

Determina cómo redimensionar la imagen cuando el marco no coincide con las dimensiones originales de la imagen. Por defecto es cover.

  • cover: Escala la imagen uniformemente (manteniendo la relación de aspecto) de modo que:

    • Ambas dimensiones (ancho y alto) de la imagen serán iguales o mayores que la dimensión correspondiente de la vista (menos el padding)
    • Al menos una dimensión de la imagen escalada será igual a la dimensión correspondiente de la vista (menos el padding)
  • contain: Escala la imagen uniformemente (manteniendo la relación de aspecto) de modo que ambas dimensiones (ancho y alto) de la imagen serán iguales o menores que la dimensión correspondiente de la vista (menos el padding).

  • stretch: Escala el ancho y alto independientemente, lo que puede cambiar la relación de aspecto de la imagen original.

  • repeat: Repite la imagen para cubrir el marco de la vista. La imagen mantendrá su tamaño y relación de aspecto, a menos que sea más grande que la vista, en cuyo caso se reducirá uniformemente para que quepa en la vista.

  • center: Centra la imagen en la vista a lo largo de ambas dimensiones. Si la imagen es más grande que la vista, se reduce uniformemente para que quepa en la vista.

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

objectFit

Determina cómo redimensionar la imagen cuando el marco no coincide con las dimensiones originales de la imagen.

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

tintColor

Cambia el color de todos los píxeles no transparentes al tintColor.

Type
color