react native fast shadow

? reagieren nativ-fast-schatten

Schnelle und hochwertige Android -Schatten für React Native

Warum

React Native unterstützt nur Schatten auf Android durch die Höhenrepublikum, aber es ist oft unmöglich, den gewünschten Effekt zu erreichen, da er nur mit sehr wenigen Voreinstellungen ausgestattet ist. Es wurden Bibliotheken von Drittanbietern erstellt, um dies zu umgehen, aber wenn sie für viele Ansichten verwendet werden, können Sie die App langsamer machen oder den Speicherverbrauch erheblich erhöhen.

Merkmale

• ? ‍♀️ Einfach zu bedienung: Drop-In-Austausch für die <View> -Komponente
• ⚡️ Performant: Schatten können auf eine große Anzahl von Ansichten ohne signifikante Leistungseinflüsse angewendet werden. Es wurde für einen geringen Speicherverbrauch und das schnelle Rendering optimiert
• ? Anpassbar: Unterstützt alle regulären Schattenproquen, shadowRadius , shadowColor , shadowOpacity und shadowOffset
• Universal: Arbeitet auf allen Plattformen. Auf iOS und Web ist <ShadowedView> nur ein Alias ​​von <View>

Erste Schritte

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

Verwendung:

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

Das Dienstprogramm shadowStyle() kann auch verwendet werden, um Schattenstile zu erstellen und Schatten konsistente Accross -Plattformen zu halten . Es erzeugt die gleiche style Requisite wie oben, teilt aber den Schattenradius um 2 auf iOS (wie aus einigen Gründen sind iOS-Schatten im Vergleich zu Design-Tools oder zu CSS-Box-Shadows zu groß):

 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 > 

Wie es unter der Motorhaube funktioniert

Auf Android werden Shadow Drawables mit dem folgenden Prozess erzeugt (siehe Shadowfactory.java für weitere Details):

1. Die Form der Sicht (Rechteck mit abgerundeten Ecken) ist schwarz auf einer Leinwand gemalt
2. Eine Gaußsche Unschärfe wird auf die Leinwand mit dem gegebenen shadowRadius unter Verwendung der Renderscript -API angewendet
3. Das Zeicheibare wird dann in ein neunpatchDrawable umgewandelt, um sicherzustellen, dass Ecken des Schattens nicht verzerrt werden, wenn die Ansicht geändert wird. Auf diese Weise können wir nur einen kleinen Schatten generieren und ihn für alle Ansichten mit demselben Rand- und Unschärfen -Radien wiederverwenden .
4. Schließlich wird das Zeichnung hinter dem Inhalt der Sicht gerendert: Es ist mit shadowColor / shadowOpacity getönt und gemäß shadowOffset ausgeglichen

Wie NeunpatchDrawable funktioniert (Beachten Sie, wie die Ecken nicht in der Lage sind, wenn die Zeichnung geändert wird):

Fehlerbehebung

React-Native-Fast-Shadow wird mit den folgenden Einschränkungen geliefert:

• Es funktioniert nur mit abgerundeten Rechtecken: Im Gegensatz zur iOS <View> -implementierung wird <ShadowedView> nicht mit freien Ansichten funktioniert. Es erwartet, dass seine direkte Nachkommenansicht ein abgerundetes Rechteck (bis zu einem Kreis) sein wird. Lösungen: Für Schatten <Text> Elemente können Sie TextShadowradius verwenden. Für komplexe Formen ist React-Native-Androw die beste Option.
• <ShadowedView> Erwartet, dass seine Kinderansicht es füllt: <ShadowedView> müssen sicherstellen mit einer Hintergrundfarbe).
• Eckradii kann falsch abgeleitet werden: Wir verwenden den Stil von <ShadowedView> oder den Stil seines direkten Kindes, um die Eckradien zu schließen, um sie anzuwenden. Wenn Ihre Ansichtshierarchie komplexer ist, wird die Eckradien möglicherweise nicht korrekt abgeleitet. Lösung: Überarbeiten Sie Ihre Sichthierarchie oder übergeben Sie den borderRadius direkt an die style -Requisite von <ShadowedView> .
• Der Schattenradius ist auf 25 oder darunter begrenzt: Diese Einschränkung kommt aus dem Unschärfeeffekt von Renderscript. Lösung: Lassen Sie uns wissen, ob dies ein Problem für Sie ist. Dies kann wahrscheinlich bearbeitet werden, indem die Schattenbitmap herabgesetzt wird, bevor der Unschärfeeffekt angewendet wird.

Benchmark

Die folgende Tabelle vergleicht den Gedächtnisverbrauch von react-native-fast-shadow , React-Native-Androw und React-Native-Shadow-2, wenn sie 100 150x200PT <Image> auf einem Pixel 2 mit einem 12-6-Radius-Schatten rendern. Die App wurde mit der Debug -Variante und Hermes erstellt.

Kein Schatten	React-nativ-Shadow-2	React-Native-Androw	reagieren nativ-fast-schatten
117 MB (REF)	430 MB (+313 MB)	403 MB (+286 MB)	123 MB (+6 MB)