react native fast shadow

? réactif-natif-fast-shadow

Ombres Android rapides et de haute qualité pour React Native

Pourquoi

React Native ne prend en charge que les ombres sur Android via l'hélice d'altitude, mais la réalisation de l'effet souhaité est souvent impossible car il ne vient qu'avec très peu de préréglages. Des bibliothèques tierces ont été créées pour contourner cela, mais lorsqu'ils sont utilisés sur de nombreuses vues, ils peuvent vous rendre plus lent ou augmenter considérablement sa consommation de mémoire.

Caractéristiques

• ? ‍♀️ Facile à utiliser: remplacement de rendez-vous pour le composant <View>
• ⚡️ Performant: les ombres peuvent être appliquées à un grand nombre de vues sans aucun impact de performance significatif. Il a été optimisé pour une faible consommation de mémoire et un rendu rapide
• ? Personnable: prend en charge tous les accessoires Shadow réguliers, shadowRadius , shadowColor , shadowOpacity et shadowOffset
• Universal: fonctionne sur toutes les plateformes. Sur iOS et Web, <ShadowedView> n'est qu'un alias de <View>

Commencer

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

Usage:

 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 ():

L'utilitaire shadowStyle() peut également être utilisé pour faciliter la création de styles d'ombre et pour conserver des plates-formes d'accross cohérentes d'ombres . Il créera le même accessoire style que ci-dessus, mais divisera le rayon de l'ombre par 2 sur iOS (comme pour certaines raisons, les ombres iOS sont trop grandes par un facteur 2 par rapport aux outils de conception ou aux barils de boîte 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 > 

Comment ça marche sous le capot

Sur Android, Shadow Drawables est généré avec le processus suivant (voir ShadowFactory.java pour plus de détails):

1. La forme de la vue (rectangle avec des coins arrondies) est peinte en noir sur une toile
2. Un flou gaussien est appliqué à la toile avec le shadowRadius donné en utilisant l'API Renderscript
3. Le dessin est ensuite converti en un NinePatch-Drawable pour s'assurer que les coins de l'ombre ne seront pas déformés lorsque la vue est redimensionnée. De cette façon, nous ne pouvons générer qu'une petite ombre dessinable et la réutiliser pour toutes les vues avec les mêmes rayons de bordure et de flou.
4. Enfin, le dessin est rendu derrière le contenu de la vue: il est teinté de shadowColor / shadowOpacity et compensé selon shadowOffset

Comment fonctionne NinePatchDrawable (remarquez comment les coins ne sont pas gardés lorsque le dessin est redimensionné):

Dépannage

React-Native-Fast-Shadow est livré avec les limites suivantes:

• Cela ne fonctionne qu'avec des rectangles arrondis: contrairement à l'implémentation iOS <View> , <ShadowedView> ne fonctionnera pas avec des vues Freeform. Il s'attend à ce que sa vue descendant directe soit un rectangle arrondi (jusqu'à un cercle). Solutions: Pour les éléments <Text> mex du Text>, vous pouvez utiliser TextShadowradius. Pour les formes complexes, React-Native-androw est votre meilleure option.
• <ShadowEdView> s'attend à ce que sa vue d'enfant le remplisse: c'est à vous de vous assurer que <ShadowedView> et ses enfants ont la même taille, sinon l'ombre sera plus grande que le contenu (vous pouvez penser à <ShadowedView> comme une vue avec une couleur d'arrière-plan).
• Les rayons d'angle peuvent être mal déduits: nous utilisons le style de <ShadowedView> ou le style de son enfant direct pour déduire les rayons d'angle à appliquer. Si votre hiérarchie de vue est plus complexe, les rayons d'angle peuvent ne pas être déduits correctement. Solution: retravaillez votre hiérarchie de vue ou transmettez le borderRadius directement à l'hélice style de <ShadowedView> .
• Shadow Radius est limité à 25 ou moins: cette limitation provient de l'effet flou de Renderscript. Solution: faites-nous savoir si c'est un problème pour vous. Cela peut probablement être travaillé en réduisant le bitmap d'ombre avant d'appliquer l'effet flou.

Référence

Le tableau suivant compare la consommation de mémoire de react-native-fast-shadow , réactif-natif-androw et réactif-natif-shadow-2 lors de la rendu 100 150x200pt <Image> sur un pixel 2 avec une ombre de rayon de 12 pt. L'application a été construite en utilisant la variante de débogage et Hermès.

Pas d'ombre	réactif-natif-shadow-2	réagir-natif-androw	réactif-natif-fast-shadow
117 Mo (réf)	430 Mo (+ 313 Mo)	403 Mo (+ 286 Mo)	123 Mo (+ 6 Mo)