CodeKitHubEn quoi consiste cet outil ?
Dans React Native, les ombres ne sont pas multiplateformes par défaut. iOS utilise quatre propriétés de style distinctes (shadowColor, shadowOffset avec width/height, shadowOpacity de 0 à 1, et shadowRadius pour le flou), qui correspondent à la même ombre CoreAnimation sous-jacente que box-shadow sur le web. Le système View natif d'Android ne prend pas du tout en charge les formes d'ombre arbitraires : il ne prend en charge que elevation, un nombre unique qui produit une ombre portée Material Design fixe basée sur la hauteur à laquelle la vue semble « flotter ».
Cela signifie qu'une ombre qui a l'air correcte sur iOS avec shadowRadius/shadowOpacity ne s'affichera pas du tout sur Android à moins de définir aussi elevation, et les deux ne seront jamais identiques au pixel près puisque la forme de l'ombre elevation n'est pas personnalisable comme celle d'iOS. Depuis React Native 0.74 avec la New Architecture activée, une propriété de style boxShadow multiplateforme est également disponible, avec la même syntaxe que CSS.
Pourquoi l'utiliser ?
- Visualisez un aperçu en direct pendant que vous ajustez le décalage, le flou, l'opacité et la couleur, au lieu de deviner des valeurs et de reconstruire votre app pour vérifier.
- Obtenez d'un coup les propriétés d'ombre iOS, l'elevation Android, et la nouvelle chaîne boxShadow multiplateforme, sans avoir à consulter trois API différentes.
- L'elevation est un contrôle séparé (non calculé automatiquement à partir du flou/de l'opacité) car le mapping d'elevation vers l'apparence de l'ombre sur Android n'est pas une traduction directe des propriétés d'ombre d'iOS — il faut l'ajuster pour correspondre visuellement, ce que cet outil permet de faire côte à côte.
- Gratuit, instantané, et prêt à copier comme un seul objet de style.
Mode d'emploi
- Ajustez le décalage X/Y, le rayon de flou, l'opacité et la couleur de l'ombre — la zone d'aperçu se met à jour en direct.
- Ajustez séparément le nombre elevation d'Android jusqu'à ce qu'il corresponde visuellement à l'intensité d'ombre voulue.
- Cliquez sur « Copy » pour copier l'objet de style complet, incluant les propriétés iOS, l'elevation Android et la chaîne boxShadow.
- Collez l'objet dans le StyleSheet de votre composant — fusionnez-le avec les styles de vue existants.
Exemple
Entrée
Décalage (0, 4), flou 8, opacité 0.25, noir, elevation 5Résultat
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'shadowRadius est réglé à la moitié de la valeur de flou affichée dans l'aperçu, ce qui correspond à la relation pratique entre le rayon de flou CSS et le shadowRadius d'iOS.
Foire aux questions
Pourquoi mon ombre ne s'affiche-t-elle pas sur Android ?
Les propriétés shadowColor/shadowOffset/shadowOpacity/shadowRadius sont réservées à iOS — le rendu natif Android les ignore simplement. Vous devez aussi définir la propriété elevation (un nombre positif) pour qu'une ombre apparaisse sur Android.
Puis-je rendre l'ombre Android identique à celle d'iOS ?
Pas exactement — elevation produit la forme d'ombre Material Design intégrée d'Android, dont la couleur, la direction du décalage ou le flou ne sont pas configurables indépendamment comme sur iOS. Vous pouvez ajuster le nombre elevation pour obtenir une intensité visuellement proche, mais une correspondance pixel par pixel entre plateformes n'est pas possible avec les API classiques shadow/elevation.
Qu'est-ce que la propriété boxShadow et puis-je l'utiliser à la place ?
boxShadow est une propriété de style plus récente, réellement multiplateforme (ajoutée dans React Native 0.74, disponible avec la New Architecture), qui utilise la même syntaxe que box-shadow en CSS et fonctionne à l'identique sur iOS et Android. Si la version de React Native et l'architecture de votre app le supportent, vous pouvez utiliser uniquement cette propriété au lieu des quatre propriétés iOS plus elevation — vérifiez votre version de RN et le statut de la New Architecture avant de vous y fier en production.
Pourquoi shadowRadius vaut-il la moitié de la valeur de flou que j'ai définie ?
L'aperçu en direct utilise box-shadow en CSS, où la valeur de flou s'étend environ deux fois plus loin que le shadowRadius d'iOS pour le même nombre. Le code généré règle shadowRadius à la moitié de votre valeur de flou pour que l'ombre visible dans l'aperçu corresponde à ce qu'iOS affiche réellement — si vous copiiez directement la valeur de flou, l'ombre iOS paraîtrait nettement plus douce et plus grande que dans l'aperçu.
Ai-je besoin de Platform.select pour appliquer ces styles ?
Non — il est possible de mettre ensemble les propriétés shadow* d'iOS et l'elevation d'Android dans un seul objet de style, exactement comme le fait le code généré : chaque plateforme ignore simplement les propriétés de l'autre. Platform.select n'est utile que si vous voulez des designs d'ombre réellement différents par plateforme, pas seulement pour éviter des avertissements (il n'y en a aucun).
J'ai défini elevation mais l'ombre Android n'apparaît toujours pas, pourquoi ?
Les deux causes les plus fréquentes : la vue n'a pas de backgroundColor (l'ombre elevation d'Android est projetée depuis le fond opaque de la vue, donc une vue transparente ne projette rien), ou un parent a overflow: 'hidden' et recadre l'ombre. Donnez à la vue une couleur de fond pleine et vérifiez les réglages overflow des ancêtres avant de supposer que la valeur d'elevation est en cause.