Generatore di ombre per React Native

In React Native le ombre funzionano in modo diverso su ciascuna piattaforma: iOS legge shadowColor, shadowOffset, shadowOpacity e shadowRadius, mentre Android ignora tutto questo e richiede invece un numero elevation separato. Regola l'ombra visivamente qui e copia un oggetto di stile che copre entrambe le piattaforme, più la stringa boxShadow multipiattaforma per le app sulla New Architecture.

Che cos'è questo strumento?

In React Native le ombre non sono multipiattaforma per impostazione predefinita. iOS usa quattro proprietà di stile separate (shadowColor, shadowOffset con width/height, shadowOpacity da 0 a 1 e shadowRadius per la sfocatura), che vengono mappate sulla stessa ombra CoreAnimation sottostante usata da box-shadow sul web. Il sistema View nativo di Android non supporta affatto forme di ombra arbitrarie: supporta solo elevation, un numero unico che produce un'ombra fissa in stile Material Design in base a quanto la view sembra "fluttuare".

Questo significa che un'ombra che appare corretta su iOS usando shadowRadius/shadowOpacity non mostrerà nulla su Android a meno che tu non imposti anche elevation, e le due non saranno mai identiche pixel per pixel poiché la forma dell'ombra di elevation non è personalizzabile come quella di iOS. A partire da React Native 0.74 con la New Architecture attivata, è disponibile anche una proprietà di stile boxShadow multipiattaforma, con la stessa sintassi del CSS.

Perché usarlo?

Guarda un'anteprima visiva live mentre regoli offset, sfocatura, opacità e colore, invece di indovinare i valori e ricompilare l'app per verificarli.
Ottieni le proprietà di ombra iOS, l'elevation Android e la nuova stringa boxShadow multipiattaforma tutte insieme, senza dover consultare tre API diverse.
Elevation è un controllo separato (non calcolato automaticamente da sfocatura/opacità) perché il mapping tra elevation e l'aspetto dell'ombra su Android non è una traduzione diretta delle proprietà di ombra di iOS: va regolato per corrispondere visivamente, e questo strumento ti permette di farlo confrontando le due piattaforme fianco a fianco.
Gratuito, istantaneo e pronto da copiare come un unico oggetto di stile.

Come si usa

Regola offset X/Y, raggio di sfocatura, opacità e colore dell'ombra: il riquadro di anteprima si aggiorna in tempo reale.
Regola separatamente il numero elevation di Android finché non corrisponde visivamente all'intensità di ombra desiderata.
Clicca su "Copy" per copiare l'intero oggetto di stile, incluse le proprietà iOS, l'elevation Android e la stringa boxShadow.
Incolla l'oggetto nello StyleSheet del tuo componente: unisci o combina con gli stili di view esistenti.

Esempio

Input

Offset (0, 4), sfocatura 8, opacità 0.25, nero, elevation 5

Risultato

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 viene impostato alla metà del valore di sfocatura mostrato nell'anteprima, in linea con la relazione pratica tra il raggio di sfocatura CSS e lo shadowRadius di iOS.

Domande frequenti

Perché la mia ombra non appare su Android?

Le proprietà shadowColor/shadowOffset/shadowOpacity/shadowRadius sono esclusive di iOS: il rendering nativo di Android le ignora semplicemente. Devi anche impostare la proprietà elevation (un numero positivo) perché su Android appaia un'ombra.

Posso rendere l'ombra Android identica a quella iOS?

Non esattamente: elevation produce la forma di ombra Material Design integrata di Android, che non è configurabile in modo indipendente per colore, direzione dell'offset o sfocatura come lo è quella di iOS. Puoi regolare il numero elevation per ottenere un'intensità visivamente simile, ma una corrispondenza pixel-perfect tra piattaforme non è possibile con le API classiche shadow/elevation.

Cos'è la proprietà boxShadow e posso usarla al posto delle altre?

boxShadow è una proprietà di stile più recente, davvero multipiattaforma (aggiunta in React Native 0.74, disponibile con la New Architecture), che usa la stessa sintassi stringa del box-shadow CSS e funziona in modo identico su iOS e Android. Se la versione di React Native e l'architettura della tua app la supportano, puoi usare solo questa proprietà al posto delle quattro proprietà iOS più elevation: verifica la versione di RN e lo stato della New Architecture prima di farci affidamento in produzione.

Perché shadowRadius è la metà del valore di sfocatura che ho impostato?

L'anteprima live usa il box-shadow CSS, dove il valore di sfocatura si estende circa il doppio rispetto allo shadowRadius di iOS a parità di numero. Il codice generato imposta shadowRadius alla metà del tuo valore di sfocatura in modo che l'ombra vista nell'anteprima corrisponda a ciò che iOS renderizza realmente: se copiassi il valore di sfocatura direttamente, l'ombra su iOS apparirebbe notevolmente più morbida e grande rispetto all'anteprima.

Serve Platform.select per applicare questi stili?

No: è sicuro mettere insieme le proprietà shadow* di iOS e l'elevation di Android in un unico oggetto di stile, esattamente come fa il codice generato: ogni piattaforma ignora semplicemente le proprietà dell'altra. Platform.select vale la pena solo se vuoi design di ombra realmente diversi per piattaforma, non solo per evitare warning (non ce ne sono).

Ho impostato elevation ma l'ombra Android ancora non appare, perché?

Le due cause più comuni: la view non ha backgroundColor (l'ombra elevation di Android viene proiettata dallo sfondo opaco della view, quindi una view trasparente non proietta nulla), oppure un elemento genitore ha overflow: 'hidden' e sta ritagliando l'ombra. Dai alla view un colore di sfondo solido e controlla le impostazioni overflow degli antenati prima di dare per scontato che il valore di elevation sia sbagliato.