React Native Varjon Generaattori

React Nativen varjo toimii eri tavalla kullakin alustalla: iOS lukee shadowColor-, shadowOffset-, shadowOpacity- ja shadowRadius-arvot, kun taas Android jättää ne kaikki huomiotta ja tarvitsee sen sijaan erillisen elevation-luvun. Säädä varjoa täällä visuaalisesti ja kopioi tyyliobjekti, joka kattaa molemmat alustat, sekä uudempi alustariippumaton boxShadow-merkkijono New Architecturea käyttäville sovelluksille.

Mikä tämä työkalu on?

React Nativessa varjot eivät ole oletuksena alustariippumattomia. iOS käyttää neljää erillistä tyyliominaisuutta (shadowColor, shadowOffset width/height-arvoineen, shadowOpacity väliltä 0-1 ja shadowRadius sumennukselle), jotka vastaavat samaa CoreAnimation-varjoa, jota webin box-shadow käyttää. Androidin natiivi View-järjestelmä ei tue mielivaltaisia varjomuotoja lainkaan — se tukee vain elevationia, yhtä lukua, joka tuottaa kiinteän Material Design -pudotusvarjon sen perusteella, miten "korkealla" näkymä näyttää leijuvan.

Tämä tarkoittaa, että varjo, joka näyttää oikealta iOS:ssa shadowRadius/shadowOpacity-arvoilla, ei näy Androidilla lainkaan, ellei elevationia myös aseteta, eivätkä kaksi koskaan näytä pikselintarkasti samalta, koska elevationin varjomuotoa ei voi mukauttaa samalla tavalla kuin iOS:n. React Native 0.74:stä lähtien New Architecturen ollessa käytössä on saatavilla myös alustariippumaton boxShadow-tyyliominaisuus, joka käyttää samaa syntaksia kuin CSS.

Miksi käyttää sitä?

Näe live-esikatselu, kun säädät sijaintia, sumennusta, läpinäkyvyyttä ja väriä — sen sijaan että arvaisit arvoja ja rakentaisit sovelluksen uudelleen tarkistaaksesi.
Saat iOS-varjo-ominaisuudet, Android-elevationin ja uudemman alustariippumattoman boxShadow-merkkijonon kerralla, jotta sinun ei tarvitse etsiä kolmea eri API:a.
Elevation on erillinen säädin (ei automaattisesti laskettu sumennuksesta/läpinäkyvyydestä), koska Androidin elevation-varjon ulkoasun kartoitus ei ole suora käännös iOS:n varjo-ominaisuuksista — se on tarkoitus säätää visuaalisesti vastaamaan, minkä tämä työkalu mahdollistaa rinnakkain.
Ilmainen, välitön ja kopiointivalmis yhtenä tyyliobjektina.

Käyttöohje

Säädä sijainti X/Y, sumennussäde, läpinäkyvyys ja varjon väri — esikatselulaatikko päivittyy reaaliajassa.
Säädä erikseen Androidin elevation-lukua, kunnes se vastaa visuaalisesti haluamaasi varjon voimakkuutta.
Napsauta "Kopioi" kopioidaksesi koko tyyliobjektin, mukaan lukien iOS-ominaisuudet, Android-elevationin ja boxShadow-merkkijonon.
Liitä objekti komponenttisi StyleSheetiin — levitä (spread) tai yhdistä se olemassa oleviin näkymätyyleihisi.

Esimerkki

Syöte

Sijainti (0, 4), sumennus 8, läpinäkyvyys 0,25, musta, elevation 5

Tuloste

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 asetetaan puoleen esikatselussa näkyvästä sumennusarvosta, mikä vastaa sitä, miten CSS:n sumennussäde käytännössä suhteutuu iOS:n shadowRadiukseen.

Usein kysytyt kysymykset

Miksi varjoni ei näy Androidilla?

shadowColor/shadowOffset/shadowOpacity/shadowRadius-ominaisuudet ovat vain iOS:lle — Androidin natiivi renderöinti yksinkertaisesti jättää ne huomiotta. Sinun täytyy asettaa myös elevation-ominaisuus (positiivinen luku), jotta varjo näkyy Androidilla ylipäätään.

Voinko saada Android-varjon näyttämään identtiseltä iOS-varjon kanssa?

Ei täysin — elevation tuottaa Androidin sisäänrakennetun Material Design -varjomuodon, jota ei voi säätää itsenäisesti värin, sijaintisuunnan tai sumennuksen osalta samalla tavalla kuin iOS:n varjoa. Voit säätää elevation-lukua saadaksesi visuaalisesti samankaltaisen voimakkuuden, mutta pikselintarkka vastaavuus alustojen välillä ei ole mahdollista klassisilla shadow/elevation-API:lla.

Mikä on boxShadow-ominaisuus ja voinko käyttää sitä sen sijaan?

boxShadow on uudempi, aidosti alustariippumaton tyyliominaisuus (lisätty React Native 0.74:ssä, saatavilla New Architecturessa), joka käyttää samaa merkkijonosyntaksia kuin CSS:n box-shadow ja toimii identtisesti sekä iOS:lla että Androidilla. Jos sovelluksesi React Native -versio ja arkkitehtuuri tukevat sitä, voit käyttää vain tätä yhtä ominaisuutta neljän erillisen iOS-ominaisuuden ja elevationin sijaan — tarkista RN-versiosi ja New Architecture -tilasi ennen kuin luotat siihen tuotannossa.

Miksi shadowRadius on puolet asettamastani sumennusarvosta?

Live-esikatselu käyttää CSS:n box-shadow'ta, jossa sumennusarvo leviää noin kaksi kertaa pidemmälle kuin iOS:n shadowRadius samalla luvulla. Generoitu koodi asettaa shadowRadiuksen puoleen sumennusarvostasi, jotta esikatselussa näkemäsi varjo vastaa sitä, mitä iOS todella renderöi — jos kopioisit sumennusarvon suoraan, iOS-varjo näyttäisi huomattavasti pehmeämmältä ja suuremmalta kuin esikatselu.

Tarvitsenko Platform.selectia näiden tyylien soveltamiseen?

Ei — on turvallista laittaa iOS:n shadow*-ominaisuudet ja Androidin elevation samaan tyyliobjektiin, aivan kuten generoitu koodi tekee: kumpikin alusta yksinkertaisesti jättää toisen ominaisuudet huomiotta. Platform.select kannattaa lisätä vain, jos haluat aidosti erilaiset varjosuunnittelut kullekin alustalle, ei pelkästään välttääksesi varoituksia (niitä ei ole).

Asetin elevationin, mutta Android-varjo ei silti näy — miksi?

Kaksi yleisintä syytä: näkymällä ei ole backgroundColoria (Androidin elevation-varjo heijastuu näkymän läpinäkymättömästä taustasta, joten läpinäkyvä näkymä ei heitä mitään varjoa), tai vanhemmalla on overflow: 'hidden', joka leikkaa varjon pois. Anna näkymälle yhtenäinen taustaväri ja tarkista esi-isien overflow-asetukset ennen kuin oletat elevation-arvon olevan väärä.