react native fast shadow

? reacción-nativa-rápida

Sombras Android rápidas y de alta calidad para React Native

Por qué

React Native solo admite sombras en Android a través del accesorio de elevación, pero lograr el efecto deseado a menudo es imposible, ya que solo viene con muy pocos preajustes. Se han creado bibliotecas de terceros para eludir esto, pero cuando se usan en muchas vistas, pueden hacer que la aplicación sea más lenta o aumentar significativamente su consumo de memoria.

Características

• ? ‍♀️ Fácil de usar: reemplazo de entrega para el componente <View>
• ⚡️ Performante: las sombras se pueden aplicar a una gran cantidad de vistas sin ningún impacto significativo en el rendimiento. Ha sido optimizado para un bajo consumo de memoria y representación rápida
• ? Personalizable: admite todos los accesorios de sombras regulares, shadowRadius , shadowColor , shadowOpacity y shadowOffset
• Universal: funciona en todas las plataformas. En iOS y Web, <ShadowedView> es solo un alias de <View>

Empezando

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

Uso:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

ShadowStyle ():

La utilidad shadowStyle() también se puede usar para facilitar la creación de estilos de sombra y mantener las sombras consistentes de las plataformas acravesadas. Creará el mismo accesorio style que el anterior, pero dividirá el radio de la sombra por 2 en iOS (ya que por algunas razones, las sombras de iOS son demasiado grandes por un factor de 2 en comparación con las herramientas de diseño o las cajas de cajas de CSS):

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

Cómo funciona debajo del capó

En Android, los dibujables de Shadow se generan con el siguiente proceso (ver ShadowFactory.java para más detalles):

1. La forma de la vista (rectángulo con esquinas redondeadas) está pintada en negro en un lienzo
2. Se aplica un desenfoque gaussiano al lienzo con el shadowRadius dado usando la API RenderScript
3. El dibujo se convierte en un ninePatchDrawable para garantizar que las esquinas de la sombra no se distorsionen cuando la vista se redimense. De esta manera, solo podemos generar una pequeña sombra dibujable y reutilizarlo para todas las vistas con el mismo borde y radios desenfoque.
4. Finalmente, el dibujo se presenta detrás del contenido de la vista: está teñido de shadowColor / shadowOpacity y se compensa de acuerdo con shadowOffset

Cómo funciona NinePatchDrawable (observe cómo las esquinas no se estén estresadas cuando se redimensiona el dibujo):

Solución de problemas

React-Native-Fast-Shadow viene con las siguientes limitaciones:

• Solo funciona con rectángulos redondeados: a diferencia de la implementación de iOS <View> , <ShadowedView> no funcionará con Vistas de Freeform. Espera que su visión descendiente directa sea un rectángulo redondeado (hasta un círculo). Soluciones: para los elementos sombreados <Text> , puede usar TextShadowradius. Para formas complejas, React-Native-Androw es su mejor opción.
• <ShadowedView> espera que su vista infantil la llene: depende de usted asegurarse de que <ShadowedView> y sus hijos tengan el mismo tamaño, de lo contrario, la sombra será más grande que el contenido (puede pensar en <ShadowedView> como una vista con un color de fondo).
• Los radios de la esquina se pueden inferir incorrectamente: usamos el estilo de <ShadowedView> o el estilo de su hijo directo para inferir los radios de la esquina para aplicar. Si su jerarquía de vista es más compleja, es posible que los radios de esquina no se infieran correctamente. Solución: Vuelva a trabajar la jerarquía de su visión o pase el borderRadius directamente al accesorio style de <ShadowedView> .
• Shadow Radius está limitado a 25 o menos: esta limitación proviene del efecto desenfoque de RenderScript. Solución: Háganos saber si este es un problema para usted. Probablemente se pueda trabajar reduciendo el mapa de bits de la sombra antes de aplicar el efecto desenfoque.

Punto de referencia

La siguiente tabla compara el consumo de memoria de react-native-fast-shadow , react-nativo-anhip y react-native-shadow-2 al renderizar 100 150x200pt <Image> en un píxel 2 con una sombra de radio de 12 puntos. La aplicación fue construida usando la variante de depuración y Hermes.

Sin sombra	React-nativo-shadow-2	reaccionamiento-nativo	reacción-nativa-rápida
117MB (ref)	430MB (+313MB)	403Mb (+286MB)	123MB (+6MB)