CodeKitHub
Íslenska
CSS verkfæri

React Native skuggagerð

Síðast uppfært:

Skuggi í React Native virkar mismunandi eftir stýrikerfi: iOS les shadowColor, shadowOffset, shadowOpacity og shadowRadius, á meðan Android hunsar þetta allt og þarf þess í stað sérstaka elevation-tölu. Stilltu skuggann sjónrænt hér og afritaðu stílhlut sem nær yfir bæði stýrikerfin, ásamt nýrri þvert-á-stýrikerfa boxShadow-streng fyrir forrit á New Architecture.

iOS reads the shadow* props; Android ignores them and uses elevation instead — set both so the shadow shows up on both platforms.
Hvað er þetta verkfæri?
Í React Native eru skuggar ekki þvert á stýrikerfi sjálfgefið. iOS notar fjórar aðskildar stíleiginleikar (shadowColor, shadowOffset með width/height, shadowOpacity frá 0-1, og shadowRadius fyrir móðu) sem samsvara sama undirliggjandi CoreAnimation-skugga og box-shadow á vefnum notar. Innbyggða View-kerfi Android styður alls ekki handahófskenndar skuggalögur — það styður aðeins elevation, eina tölu sem framleiðir fastan Material Design-skugga byggðan á því hversu "hátt" útlitið virðist svífa.
Þetta þýðir að skuggi sem lítur rétt út á iOS með shadowRadius/shadowOpacity mun alls ekki sjást á Android nema þú stillir líka elevation, og þau tvö munu aldrei líta út alveg eins niður í hvern díl þar sem skuggalögun elevation er ekki hægt að sérsníða eins og á iOS. Frá og með React Native 0.74 með New Architecture virkjuðu er einnig í boði þvert-á-stýrikerfa boxShadow-stíleiginleiki sem notar sömu setningafræði og CSS.
Af hverju að nota það?
  • Sjáðu lifandi sjónræna forskoðun á meðan þú stillir hliðrun, móðu, gagnsæi og lit — í stað þess að giska á gildi og endurbyggja forritið til að athuga.
  • Fáðu iOS-skuggaeiginleika, Android elevation, og nýrri þvert-á-stýrikerfa boxShadow-streng allt í einu, svo þú þurfir ekki að fletta upp þremur ólíkum API.
  • Elevation er sérstök stjórn (ekki reiknuð sjálfkrafa út frá móðu/gagnsæi) því tenging Android á milli elevation og útlits skugga er ekki bein þýðing á skuggaeiginleikum iOS — þú átt að stilla hana svo hún passi sjónrænt, sem þetta tól gerir þér kleift að gera hlið við hlið.
  • Ókeypis, samstundis og tilbúið til afritunar sem einn stílhlutur.
Hvernig á að nota það
  1. Stilltu hliðrun X/Y, móðuradíus, gagnsæi og skuggalit — forskoðunarkassinn uppfærist lifandi.
  2. Stilltu Android elevation-töluna sérstaklega þar til hún passar sjónrænt við þann skuggastyrk sem þú vilt.
  3. Smelltu á "Afrita" til að afrita allan stílhlutinn, þar á meðal iOS-eiginleika, Android elevation, og boxShadow-strenginn.
  4. Límdu hlutinn inn í StyleSheet íhlutans þíns — dreifðu (spread) honum eða sameinaðu með núverandi view-stílum.
Dæmi
Inntak
Hliðrun (0, 4), móða 8, gagnsæi 0,25, svart, elevation 5
Úttak
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 er stillt á helming móðugildisins sem sýnt er í forskoðuninni, í samræmi við hvernig CSS móðuradíus tengist shadowRadius á iOS í raun.
Algengar spurningar
Af hverju sést skugginn minn ekki á Android?
shadowColor/shadowOffset/shadowOpacity/shadowRadius-eiginleikarnir eru eingöngu fyrir iOS — innbyggð myndgerð Android hunsar þá einfaldlega. Þú þarft líka að stilla elevation-eiginleikann (jákvæða tölu) svo skuggi birtist yfirleitt á Android.
Get ég látið Android-skuggann líta nákvæmlega eins út og iOS-skuggann?
Ekki nákvæmlega — elevation framleiðir innbyggða Material Design-skuggalögun Android, sem er ekki hægt að stilla sjálfstætt fyrir lit, hliðrunarstefnu eða móðu eins og skugginn á iOS. Þú getur stillt elevation-töluna til að fá sjónrænt svipaðan styrk, en fullkomlega nákvæm samsvörun díl fyrir díl milli stýrikerfa er ekki möguleg með hefðbundnu shadow/elevation-API.
Hvað er boxShadow-eiginleikinn og get ég notað hann í staðinn?
boxShadow er nýrri, sannarlega þvert-á-stýrikerfa stíleiginleiki (bætt við í React Native 0.74, í boði á New Architecture) sem notar sömu strengjasetningafræði og CSS box-shadow og virkar eins á bæði iOS og Android. Ef React Native-útgáfa og arkitektúr forritsins þíns styðja hann geturðu notað aðeins þennan eina eiginleika í stað fjögurra aðskildra iOS-eiginleika auk elevation — athugaðu RN-útgáfuna þína og stöðu New Architecture áður en þú reiðir þig á hann í framleiðslu.
Af hverju er shadowRadius helmingur af móðugildinu sem ég stillti?
Lifandi forskoðunin notar CSS box-shadow, þar sem móðugildið dreifist um það bil tvöfalt lengra en shadowRadius á iOS fyrir sömu tölu. Kóðinn sem myndast stillir shadowRadius á helming móðugildisins þíns svo skugginn sem þú sérð í forskoðuninni passi við það sem iOS gerir í raun — ef þú afritaðir móðugildið beint myndi iOS-skugginn líta áberandi mýkri og stærri út en forskoðunin.
Þarf ég Platform.select til að beita þessum stílum?
Nei — það er óhætt að setja shadow*-eiginleika iOS og elevation Android saman í einn stílhlut, nákvæmlega eins og kóðinn sem myndast gerir: hvert stýrikerfi hunsar einfaldlega eiginleika hins. Platform.select er aðeins þess virði að bæta við ef þú vilt raunverulega ólíka skuggahönnun eftir stýrikerfi, ekki bara til að forðast viðvaranir (engar eru til staðar).
Ég stillti elevation en Android-skugginn sést samt ekki — af hverju?
Tvær algengustu orsakirnar: view-ið hefur engan backgroundColor (Android elevation-skugginn er varpað frá ógagnsæjum bakgrunni view-sins, svo gagnsætt view varpar engum skugga), eða foreldri hefur overflow: 'hidden' og klippir skuggann af. Gefðu view-inu heilan bakgrunnslit og athugaðu overflow-stillingar forfeðra áður en þú gerir ráð fyrir að elevation-gildið sé rangt.