CodeKitHubCe este acest instrument?
În React Native, umbrele nu sunt cross-platform în mod implicit. iOS folosește patru proprietăți de stil separate (shadowColor, shadowOffset cu width/height, shadowOpacity de la 0 la 1 și shadowRadius pentru estompare), care se traduc în aceeași umbră CoreAnimation folosită și de box-shadow pe web. Sistemul nativ View din Android nu suportă deloc forme de umbră arbitrare — suportă doar elevation, un singur număr care produce o umbră fixă în stil Material Design, în funcție de cât de „sus” pare să plutească elementul.
Asta înseamnă că o umbră care arată bine pe iOS folosind shadowRadius/shadowOpacity nu va apărea deloc pe Android, decât dacă setezi și elevation, iar cele două nu vor arăta niciodată identic pixel cu pixel, deoarece forma umbrei de la elevation nu poate fi personalizată așa cum se poate cea de pe iOS. Începând cu React Native 0.74, cu New Architecture activată, este disponibilă și o proprietate de stil cross-platform, boxShadow, care folosește aceeași sintaxă ca în CSS.
De ce să-l folosești?
- Vezi o previzualizare vizuală live în timp ce ajustezi offset-ul, estomparea, opacitatea și culoarea — în loc să ghicești valori și să reconstruiești aplicația de fiecare dată pentru a verifica.
- Obții proprietățile de umbră pentru iOS, elevation pentru Android și noul șir cross-platform boxShadow, toate deodată, ca să nu mai fie nevoie să cauți în trei API-uri diferite.
- Elevation este un control separat (nu se calculează automat din estompare/opacitate), deoarece maparea dintre elevation și aspectul umbrei pe Android nu este o traducere directă a proprietăților de umbră de pe iOS — trebuie ajustat vizual pentru a se potrivi, lucru pe care acest instrument ți-l permite să-l faci în paralel.
- Gratuit, instantaneu și gata de copiat, sub forma unui singur obiect de stil.
Cum se folosește
- Ajustează offset-ul X/Y, raza de estompare, opacitatea și culoarea umbrei — caseta de previzualizare se actualizează live.
- Ajustează separat numărul elevation pentru Android, până când corespunde vizual intensității dorite a umbrei.
- Apasă pe „Copiază” pentru a copia întregul obiect de stil, inclusiv proprietățile iOS, elevation pentru Android și șirul boxShadow.
- Lipește obiectul în StyleSheet-ul componentei tale — combină-l (spread) sau îmbină-l cu stilurile existente ale view-ului.
Exemplu
Intrare
Offset (0, 4), estompare 8, opacitate 0,25, negru, elevation 5Rezultat
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 este setat la jumătate din valoarea de estompare afișată în previzualizare, corespunzând modului în care raza de estompare din CSS se raportează în practică la shadowRadius de pe iOS.
Întrebări frecvente
De ce nu apare umbra pe Android?
Proprietățile shadowColor/shadowOffset/shadowOpacity/shadowRadius sunt exclusive pentru iOS — randarea nativă din Android le ignoră pur și simplu. Trebuie să setezi și proprietatea elevation (un număr pozitiv) pentru ca o umbră să apară deloc pe Android.
Pot face ca umbra de pe Android să arate identic cu cea de pe iOS?
Nu chiar — elevation produce forma de umbră Material Design integrată în Android, care nu poate fi configurată independent pentru culoare, direcția offset-ului sau estompare, așa cum se poate umbra de pe iOS. Poți ajusta numărul elevation pentru a obține o intensitate vizual similară, dar o potrivire perfectă pixel cu pixel între platforme nu este posibilă cu API-urile clasice shadow/elevation.
Ce este proprietatea boxShadow și pot să o folosesc în schimb?
boxShadow este o proprietate de stil mai nouă, cu adevărat cross-platform (adăugată în React Native 0.74, disponibilă pe New Architecture), care folosește aceeași sintaxă de tip șir ca box-shadow din CSS și funcționează identic pe iOS și Android. Dacă versiunea de React Native și arhitectura aplicației tale o suportă, poți folosi doar această proprietate în locul celor patru proprietăți separate pentru iOS plus elevation — verifică versiunea RN și starea New Architecture înainte de a te baza pe ea în producție.
De ce shadowRadius este jumătate din valoarea de estompare pe care am setat-o?
Previzualizarea live folosește box-shadow din CSS, unde valoarea de estompare se extinde de aproximativ două ori mai mult decât shadowRadius de pe iOS pentru același număr. Codul generat setează shadowRadius la jumătate din valoarea de estompare, astfel încât umbra pe care o vezi în previzualizare să corespundă cu ceea ce randează efectiv iOS — dacă ai copia direct valoarea de estompare, umbra pe iOS ar arăta vizibil mai difuză și mai mare decât în previzualizare.
Am nevoie de Platform.select pentru a aplica aceste stiluri?
Nu — este sigur să pui proprietățile shadow* pentru iOS și elevation pentru Android împreună într-un singur obiect de stil, exact așa cum face codul generat: fiecare platformă ignoră pur și simplu proprietățile celeilalte. Merită să adaugi Platform.select doar dacă vrei modele de umbră cu adevărat diferite pe fiecare platformă, nu doar pentru a evita avertismente (nu există niciunul).
Am setat elevation, dar umbra de pe Android tot nu apare — de ce?
Cele mai frecvente două cauze: view-ul nu are backgroundColor (umbra generată de elevation pe Android este proiectată de fundalul opac al view-ului, deci un view transparent nu proiectează nimic), sau un părinte are overflow: 'hidden' și decupează umbra. Dă view-ului o culoare de fundal solidă și verifică setările de overflow ale strămoșilor înainte de a presupune că valoarea elevation este greșită.