CodeKitHubKas yra šis įrankis?
React Native šešėliai pagal numatytuosius nustatymus nėra tarpplatforminiai. iOS naudoja keturias atskiras stiliaus savybes (shadowColor, shadowOffset su width/height, shadowOpacity nuo 0 iki 1 ir shadowRadius suliejimui), kurios atitinka tą patį CoreAnimation šešėlį, kurį naudoja žiniatinklio box-shadow. Android natyvi View sistema apskritai nepalaiko savavališkų šešėlių formų — ji palaiko tik elevation, vieną skaičių, kuris sukuria fiksuotą Material Design šešėlį pagal tai, kaip "aukštai" vaizdas atrodo plūduriuojantis.
Tai reiškia, kad šešėlis, kuris iOS atrodo tinkamai naudojant shadowRadius/shadowOpacity, Android visiškai nebus matomas, nebent taip pat nustatysite elevation, o abu niekada neatrodys identiškai piksel po pikselio, nes elevation šešėlio forma negali būti pritaikoma taip, kaip iOS. Nuo React Native 0.74 versijos su įjungta New Architecture taip pat prieinama tarpplatforminė boxShadow stiliaus savybė, naudojanti tą pačią sintaksę kaip CSS.
Kodėl jį naudoti?
- Matykite gyvą vizualią peržiūrą reguliuodami poslinkį, suliejimą, nepermatomumą ir spalvą — vietoj to, kad spėtumėte reikšmes ir iš naujo kurtumėte programą norėdami patikrinti.
- Gaukite iOS šešėlio savybes, Android elevation ir naujesnę tarpplatforminę boxShadow eilutę vienu metu, kad nereikėtų ieškoti trijų skirtingų API.
- Elevation yra atskiras valdiklis (neapskaičiuojamas automatiškai iš suliejimo/nepermatomumo), nes Android elevation ir šešėlio išvaizdos susiejimas nėra tiesioginis iOS šešėlio savybių vertimas — jį reikia sureguliuoti, kad vizualiai atitiktų, o šis įrankis leidžia tai daryti greta.
- Nemokamas, akimirksniu ir paruoštas kopijuoti kaip vienas stiliaus objektas.
Kaip naudoti
- Sureguliuokite poslinkį X/Y, suliejimo spindulį, nepermatomumą ir šešėlio spalvą — peržiūros langelis atsinaujina gyvai.
- Atskirai sureguliuokite Android elevation skaičių, kol jis vizualiai atitiks norimą šešėlio stiprumą.
- Spustelėkite "Kopijuoti", norėdami nukopijuoti visą stiliaus objektą, įskaitant iOS savybes, Android elevation ir boxShadow eilutę.
- Įklijuokite objektą į savo komponento StyleSheet — išplėskite (spread) arba sujunkite su esamais vaizdo stiliais.
Pavyzdys
Įvestis
Poslinkis (0, 4), suliejimas 8, nepermatomumas 0,25, juoda, elevation 5Išvestis
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 nustatomas kaip pusė peržiūroje rodomos suliejimo reikšmės, atitinkant tai, kaip CSS suliejimo spindulys praktiškai siejasi su iOS shadowRadius.
Dažniausiai užduodami klausimai
Kodėl mano šešėlis nerodomas Android?
shadowColor/shadowOffset/shadowOpacity/shadowRadius savybės skirtos tik iOS — Android natyvus atvaizdavimas jas tiesiog ignoruoja. Norėdami, kad šešėlis apskritai pasirodytų Android, taip pat turite nustatyti elevation savybę (teigiamą skaičių).
Ar galiu padaryti, kad Android šešėlis atrodytų identiškas iOS šešėliui?
Ne visai — elevation sukuria įmontuotą Android Material Design šešėlio formą, kurios negalima nepriklausomai konfigūruoti pagal spalvą, poslinkio kryptį ar suliejimą taip, kaip iOS šešėlio. Galite reguliuoti elevation skaičių, kad gautumėte vizualiai panašų stiprumą, tačiau tobulas piksel po pikselio atitikimas tarp platformų neįmanomas naudojant klasikinius shadow/elevation API.
Kas yra boxShadow savybė ir ar galiu ją naudoti vietoj to?
boxShadow yra naujesnė, tikrai tarpplatforminė stiliaus savybė (pridėta React Native 0.74 versijoje, prieinama su New Architecture), naudojanti tą pačią eilutės sintaksę kaip CSS box-shadow ir veikianti identiškai tiek iOS, tiek Android. Jei jūsų programos React Native versija ir architektūra tai palaiko, galite naudoti tik šią vieną savybę vietoj keturių atskirų iOS savybių plius elevation — prieš pasikliaudami ja gamyboje, patikrinkite savo RN versiją ir New Architecture būseną.
Kodėl shadowRadius yra pusė mano nustatytos suliejimo reikšmės?
Gyva peržiūra naudoja CSS box-shadow, kur suliejimo reikšmė pasklinda maždaug dvigubai toliau nei iOS shadowRadius su tuo pačiu skaičiumi. Sugeneruotas kodas nustato shadowRadius kaip pusę jūsų suliejimo reikšmės, kad peržiūroje matomas šešėlis atitiktų tai, ką iOS iš tikrųjų atvaizduoja — jei suliejimo reikšmę nukopijuotumėte tiesiogiai, iOS šešėlis atrodytų pastebimai švelnesnis ir didesnis nei peržiūroje.
Ar man reikia Platform.select, kad pritaikyčiau šiuos stilius?
Ne — saugu sudėti iOS shadow* savybes ir Android elevation kartu į vieną stiliaus objektą, lygiai taip, kaip tai daro sugeneruotas kodas: kiekviena platforma tiesiog ignoruoja kitos savybes. Platform.select verta pridėti tik jei norite tikrai skirtingo šešėlio dizaino kiekvienai platformai, o ne tik norint išvengti įspėjimų (jų nėra).
Nustačiau elevation, bet Android šešėlis vis tiek nerodomas — kodėl?
Dvi dažniausios priežastys: vaizdas neturi backgroundColor (Android elevation šešėlis metamas nuo vaizdo nepermatomo fono, todėl permatomas vaizdas nemeta jokio šešėlio), arba tėvinis elementas turi overflow: 'hidden' ir apkerpa šešėlį. Prieš manydami, kad elevation reikšmė neteisinga, suteikite vaizdui vientisą fono spalvą ir patikrinkite protėvių overflow nustatymus.