Saltar al contenido principal

Propiedades de Sombra

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 →

Referencia

En React Native existen 3 conjuntos de APIs para sombras:

  • boxShadow: Propiedad de estilo de View y una implementación compatible con la especificación de la propiedad de estilo web del mismo nombre.

  • dropShadow: Función de filtro específica disponible como parte de la propiedad de estilo filter de View.

  • Varias propiedades shadow (shadowColor, shadowOffset, shadowOpacity, shadowRadius): Se corresponden directamente con sus equivalentes nativos expuestos por las APIs a nivel de plataforma.

Las diferencias entre dropShadow y boxShadow son:

  • dropShadow existe como parte de filter, mientras que boxShadow es una propiedad de estilo independiente.

  • dropShadow es una máscara alfa, por lo que solo los píxeles con valor alfa positivo "proyectarán" sombra. boxShadow proyecta alrededor del cuadro de borde del elemento sin importar su contenido (a menos que sea interior).

  • dropShadow solo está disponible en Android, mientras que boxShadow funciona en iOS y Android.

  • dropShadow no puede ser interior (inset) como boxShadow.

  • dropShadow no tiene el argumento spreadDistance como boxShadow.

Tanto boxShadow como dropShadow son generalmente más versátiles que las propiedades shadow. Sin embargo, las propiedades shadow se corresponden con APIs nativas de plataforma, por lo que si solo necesitas una sombra sencilla, son recomendables. Nota: solo shadowColor funciona en Android e iOS; las demás propiedades shadow solo funcionan en iOS.

Props​

boxShadow​

Consulta View Style Props para la documentación.

dropShadow
Android
​

Consulta View Style Props para la documentación.

shadowColor​

Establece el color de la sombra paralela.

Esta propiedad solo funciona en Android API 28 y superiores. Para funcionalidad similar en APIs anteriores de Android, usa la propiedad elevation.

Type
color

shadowOffset
iOS
​

Establece el desplazamiento de la sombra paralela.

Type
object: {width: number,height: number}

shadowOpacity
iOS
​

Establece la opacidad de la sombra paralela (multiplicada por el componente alfa del color).

Type
number

shadowRadius
iOS
​

Establece el radio de desenfoque de la sombra paralela.

Type
number