react native shadow 2
v7.1.1
Important
Le nouveau React Native 0.76 , sorti le 23 octobre 2024 , prend enfin une ombre multiplateforme!
Cette nouvelle fonctionnalité doit être préférée à cette bibliothèque.
Je ne peux qu'apprécier de tout cœur le soutien et la gentillesse de tout le monde au cours des dernières années et célébrer l'atteinte des téléchargements de 39k chaque semaine et de 2m au total ?
Si vous recherchez un professionnel passionné avec 5 ans d'expertise en dactylographie, réagi et réagi, contactez-moi à [email protected]!
React-Native-Shadow est mort pendant des années. Il s'agit d'une version améliorée avec plus de fonctionnalités, de la prise en charge de typeScript et écrit à partir de zéro. Il n'est pas nécessaire de définir sa taille: l'ombre est intelligemment appliquée sur le premier rendu, puis réappliquée avec précision sur les suivantes.
Il résout l'ancien numéro natif React de ne pas avoir la même apparence d'ombre et l'utilisation pour Android, iOS et Web.
Le site Web de l'étherCreative / React-Native-Shadow-Generator ne vous donnera pas de résultats très similaires entre les deux plateformes, pour les raisons que j'ai décrites ici. Il n'est pas non plus aussi personnalisable que cette bibliothèque.
Compatible avec Android, iOS et Web. Et expo!
Prend en charge RTL.
Essayez à cette bibliothèque!
La dernière version
react-native-svgest recommandée, y compris si vous utilisez 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 > 
| Propriété | Description | Taper | Défaut |
|---|---|---|---|
| startColor | La couleur du gradient initial de l'ombre. | string | '#00000020' |
| endcolore | La couleur dégradé finale de l'ombre. | string | StartColor transparent. Explication. |
| distance | Jusqu'où l'ombre va. | number | 10 |
| compenser | Déplace l'ombre. Négatif x se déplace à gauche / démarrer, négatif y le déplace.Accepte les valeurs 'x%' .La définition de cela va par défaut paintInside to True , car c'est le comportement souhaité habituel. | [x: string | number, y: string | number] | [0, 0] |
| PaintInside | Appliquez l'ombre sous / à l'intérieur du contenu. startColor est utilisé comme couleur de remplissage, sans dégradé.Utile lors de l'utilisation offset ou si votre enfant a une certaine transparence. | boolean | false , mais true si offset est défini |
| côtés | Les côtés qui auront leurs ombres dessinés. N'inclut pas les coins. Les bases des côtés indéfinis à vrai . Explication. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| coins | Les coins qui auront leurs ombres dessinés. Corners non définis se replient de vrai . Explication. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| style | Le style de la vue qui enveloppe vos enfants. Lisez les notes ci-dessous. | StyleProp<ViewStyle> | undefined |
| conteneursyle | Le style de la vue qui enroule l'ombre et vos enfants. Utile pour les marges. | StyleProp<ViewStyle> | undefined |
| extensible | Faites en sorte que vos enfants occupent tous les espaces horizontaux disponibles. Explication. | boolean | false |
| samedi | N'utilisera pas le dimensionnement et le positionnement relatifs sur le 1er rendu, mais sur les rends suivants avec les tailles de mise en œuvre exactes. Utile si vous traitez avec des rayons supérieurs aux tailles des côtés (comme un cercle) pour éviter les artefacts visuels sur le 1er rendu. Si true , l'ombre n'apparaîtra pas sur le 1er rendu. | boolean | false |
| désactivé | Désactive l'ombre. Utile pour les composants facilement réutilisés car parfois les ombres ne sont pas souhaitées.containerStyle et style sont toujours appliqués. | boolean | false |
Si l'ombre a un seul enfant, il obtiendra la width , height et toutes les propriétés de borderRadius de la propriété style des enfants, si elle est définie.
Vous pouvez également définir ces propriétés dans le style de l'ombre. Les propriétés définies ici auront la priorité sur celles définies dans le style de l'enfant.
Si la width et height sont définies dans l'une d'entre elles, il n'y aura qu'un seul rendu, car le premier dimensionnement automatique ne se produira pas, seulement le rendu précis.
Vous pouvez utiliser le 'borderTopLeftRadius' ou 'borderTopStartRadius' et leurs variations pour définir les rayons des coins, bien que je recommande ce dernier car c'est la norme RTL.
Avoir un rayon supérieur à son côté gâchera l'ombre si les tailles ne sont pas définies. Vous pouvez utiliser la propriété safeRender pour afficher uniquement l'ombre sur le 2ème rendu et au-delà, lorsque nous avons la taille exacte des composants et que les rayons sont correctement limités.
Les rayons supérieurs à 2000 ( rounded-full de Tailwind est 9999) peut écraser Android.
L'opacité est définie directement dans les propriétés startColor et endColor , dans le canal alpha. Par exemple: '#0001' est un noir presque transparent. Vous pouvez également utiliser '#rrggbbaa' , 'rgba()' , 'hsla()' etc. Tous les motifs de ce lien, mais pas les couleurs int, sont acceptés.
Utilisez la propriété stretch ou style={{alignSelf: 'stretch'}} dans votre composant d'ombre. Explication!
Il a exporté le type ShadowProps , les accessoires du composant de l'ombre. Vous pouvez faire ce qui suit:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset et size sont de lancer des erreurs de dactylographie!Mettez à niveau votre dactylographie à au moins 4.0.0! Ces deux propriétés utilisent des tuples étiquetés . Si vous n'utilisez pas TypeScript, cela n'arrivera pas.
