CapDrive
Guía de uso

Image

Muestra una imagen de un recurso de calibre, como un logotipo, un fondo decorativo o una textura de mosaico. source Utilice el nombre del recurso para configurar el método de escalado, recorte o repetición a los tamaños disponibles.

Ejemplo

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Uso

  • source nombra una imagen del paquete. original conserva colores; template aplica color. repeatMode repite imágenes, no hijos; contentMode controla el escalado normal.
  • Las medidas numéricas son puntos. auto mide el contenido y fill usa el espacio asignado. Define primero el contenedor: fill y un texto largo no amplían un padre fijo.

Propiedades

sourcestring

Nombre de archivo de los recursos del instrumento, no un nombre SF Symbols.

Ejemplo""
contentMode?"fit" | "fill" | "stretch"

fit muestra todo; fill llena y recorta; stretch cambia la proporción.

Ejemplo"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Repite al tamaño original: repeat ambos ejes, repeatX/repeatY uno, none sin repetición.

Ejemplo"none"
renderingMode?"original" | "template"

original conserva colores; template aplica el color indicado.

Ejemplo"original"
color?Paint

Color de dibujo, incluidos los colores HDR.

EjemploHDR($env.foreground)
contentAnimation?ContentAnimation

Transición al cambiar contenido. Elige un type compatible; duration/delay en segundos.

Ejemplo{type: "fade", duration: 0.25}
Propiedades comunes
width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo100
height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo80
padding?number

Relleno interior del contenido en puntos.

Ejemplo0
x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}
background?Paint

Color o degradado de fondo; clear es transparente.

Ejemplo"clear"
opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1
cornerRadius?number

Radio de las esquinas en puntos.

Ejemplo0
clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"
mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

Ejemplo<Circle width="fill" height="fill" background="white"/>
zIndex?number

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0
blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4
innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

Ejemplo{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

Ejemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color de la sombra exterior.

EjemploHDR("black")
shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0
shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4
shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0
shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2
animations?Animation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

Ejemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identidad estable entre elementos hermanos.

Ejemplo práctico

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Animación

Animación

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

PropiedadesAl omitir
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Anterior

Group

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas