react native shadow 2
v7.1.1
Wichtig
Der neue React Native 0,76 , der am 23. Oktober 2024 veröffentlicht wurde, unterstützt schließlich einen plattformübergreifenden Schatten!
Diese neue Funktion sollte dieser Bibliothek bevorzugt werden.
Ich kann in den vergangenen fast 4 Jahren nur von ganzem Herzen die Unterstützung und Freundlichkeit aller zu schätzen wissen und feiern, dass sie 39.000 Wochen- und 2 -m -Downloads erreicht haben ?
Wenn Sie nach einem leidenschaftlichen Fachmann mit 5 Jahren Fachwissen in Typenkript, Reagieren und Reagieren sind, kontaktieren Sie mich unter [email protected]!
React-Native-Shadow ist jahrelang tot. Dies ist eine verbesserte Version mit mehr Funktionen, Typscript -Unterstützung und von Grund auf neu. Es ist nicht erforderlich, seine Größe zu definieren: Der Schatten wird auf das erste Rendern intelligent angewendet und dann genau auf die folgenden angewendet.
Es löst die alte Reaktionsausgabe, die nicht den gleichen Schattenerschein und die gleiche Verwendung für Android, iOS und Web hat.
Die Website von EtherCreative/React-Native-Shadow-Generator bietet Ihnen aus den hier beschriebenen Gründen keine sehr ähnlichen Ergebnisse zwischen den beiden Plattformen. Es ist auch nicht so anpassbar wie diese Bibliothek.
Kompatibel mit Android, iOS und Web. Und Expo!
Unterstützt RTL.
Probieren Sie diese Bibliothek schnell aus!
Die neueste Version
react-native-svgwird empfohlen, einschließlich der Verwendung von Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| Eigentum | Beschreibung | Typ | Standard |
|---|---|---|---|
| StartColor | Die anfängliche Gradientenfarbe des Schattens. | string | '#00000020' |
| EndColor | Die endgültige Gradientenfarbe des Schattens. | string | Transparente StartColor. Erläuterung. |
| Distanz | Wie weit geht der Schatten. | number | 10 |
| Offset | Bewegt den Schatten. Negativ x bewegt es links/Start, negativ y bewegt es nach oben.Akzeptiert 'x%' Werte.Wenn Sie dies definieren, wird paintInside standardmäßig zu wahr , da es das übliche gewünschte Verhalten ist. | [x: string | number, y: string | number] | [0, 0] |
| Paintinside | Wenden Sie den Schatten unten/innerhalb des Inhalts an. startColor wird als Füllfarbe ohne Gradient verwendet.Nützlich bei der Verwendung von offset oder wenn Ihr Kind über eine Transparenz verfügt. | boolean | false , aber true wenn offset definiert ist |
| Seiten | Die Seiten, bei denen ihre Schatten gezogen werden. Enthält keine Ecken. Undefinierte Seiten Fallbacks zu True . Erläuterung. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| Ecken | Die Ecken, in denen ihre Schatten gezogen werden. Undefinierte Ecken Fallbacks zu True . Erläuterung. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| Stil | Der Stil der Sichtweise, der Ihre Kinder umhüllt. Lesen Sie die folgenden Notizen. | StyleProp<ViewStyle> | undefined |
| Container | Der Stil der Sicht, der den Schatten und Ihre Kinder umhüllt. Nützlich für Ränder. | StyleProp<ViewStyle> | undefined |
| strecken | Machen Sie Ihre Kinder zu allen verfügbaren horizontalen Raum. Erläuterung. | boolean | false |
| sicherer | Verwenden Sie die relative Größen- und Positionierung am 1. Render nicht, sondern bei den folgenden Rendern mit den genauen Onlayout -Größen. Nützlich, wenn Sie mit Radien größer als die Seitengrößen (wie ein Kreis) umgehen, um visuelle Artefakte am 1. Render zu vermeiden. Wenn der true nicht im 1. Render erscheint. | boolean | false |
| deaktiviert | Deaktiviert den Schatten. Nützlich, um Komponenten leicht wiederzuverwenden, da manchmal Schatten nicht erwünscht sind.containerStyle und style werden noch angewendet. | boolean | false |
Wenn der Schatten ein einzelnes Kind hat, erhält er die width , height und alle borderRadius -Eigenschaften aus dem Immobilien style , falls definiert.
Sie können diese Eigenschaften auch im style des Schattens definieren. Die definierten Eigenschaften hier haben Priorität gegenüber den, die im style des Kindes definiert sind.
Wenn die width und height in einem dieser Definitionen definiert sind, wird es nur einen einzigen Render geben, da die erste automatische Größe nicht stattfindet, nur das genaue Rendern.
Sie können entweder den 'borderTopLeftRadius' oder 'borderTopStartRadius' und ihre Variationen verwenden, um die Ecken Radien zu definieren, obwohl ich letzteres empfehle, da es sich um den RTL -Standard handelt.
Wenn die Größen nicht definiert sind, wird der Schatten durcheinander gebracht. Sie können die safeRender -Eigenschaft verwenden, um nur den Schatten auf dem 2. Render und darüber hinaus anzuzeigen, wenn wir die genaue Komponentengröße haben und die Radien ordnungsgemäß begrenzt sind.
Radien größer als 2000 ( rounded-full ist 9999) kann Android zum Absturz bringen.
Die Opazität wird direkt in die Eigenschaften von startColor und endColor im Alpha -Kanal eingestellt. ZB: '#0001' ist ein fast transparentes Schwarz. Sie können auch '#rrggbbaa' , 'rgba()' , 'hsla()' usw. verwenden. Alle Muster in diesem Link, aber keine int -Farben, werden akzeptiert.
Verwenden Sie die stretch -Eigenschaft oder style={{alignSelf: 'stretch'}} in deiner Schattenkomponente. Erläuterung!
Es wird der ShadowProps -Typ exportiert, die Requisiten der Schattenkomponente. Sie können Folgendes tun:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset und size werfen Typ -Skriptfehler!Aktualisieren Sie Ihr Typenkript auf mindestens 4.0.0! Diese beiden Eigenschaften verwenden markierte Tupel . Wenn Sie TypeScript nicht verwenden, wird dies nicht geschehen.
