Hyödynnä flexboxia joustavien ja reagoivien asettelujen luomiseen React Nativessa.
Flexbox on CSS-työkalu, jonka avulla voit rakentaa joustavia yksiulotteisia asetteluja. Sen avulla voit hallita elementtien sijaintia säilössä, joten voit hallita paremmin sisällön esittämistä näytöllä.
Tämä opetusohjelma näyttää, kuinka flexboxia käytetään React Nativessa joustavien ja reagoivien asettelujen luomiseen. Opit sijoittamaan säilöelementin alikohteita flexbox-ominaisuuksien avulla.
Flexbox-käyttäytymisen vertailu React Nativessa ja Web Developmentissa
Jos haluat järjestää säilöelementin sisällön flexboxin avulla tavallisessa CSS: ssä, sinun on käytettävä näyttö: flex omaisuutta.
kontti { näyttö: flex; }Mutta React Nativen kanssa sinun ei tarvitse asettaa näyttö: flex omaisuutta. Tämä johtuu siitä, että React Native käyttää oletuksena flexboxia asettelujen rakentamiseen.
Tässä on joitain eroja, jotka on pidettävä mielessä miten flexbox käyttäytyy, kun sitä käytetään HTML-elementtien tasaamiseen verkkosovelluksissa verrattuna siihen, miten se toimii React Nativessa:
- flexDirection oletuksena rivi verkkosovelluksissa, mutta oletuksena sarakkeessa React Nativessa.
- alignContent oletuksena venyttää verkkosovelluksissa ja flex-start React Nativessa.
- flexShrink oletusarvo on 1 verkossa ja 0 React Nativessa.
Flexbox-ominaisuuksien käyttäminen React Nativessa
Flexbox-ominaisuuksien avulla voit kuvata, kuinka säilöelementin alielementit tasataan. Sinun on ymmärrettävä nämä ominaisuudet, jotta voit luoda monimutkaisia asetteluja, jotka sopivat sovelluksesi tarpeisiin.
1. Flex-ominaisuuden käyttäminen React Nativessa
The flex ominaisuus määrittää kuinka Näytä komponentti täyttää näytön. Tämä ominaisuus hyväksyy kokonaislukuarvon, joka on suurempi tai yhtä suuri kuin 0. Arvo määrittää näytön murto-osan Näytä komponentin pitäisi kestää.
Tässä esimerkissä luot näytön, jossa on yksi näkymä kohteesta React Natiivikomponenttien kirjasto:
tuonti Reagoi alkaen"reagoi"
tuonti { Tyylitaulukko, Näytä } alkaen"react-natiivi"
viedäoletuksenatoimintoSovellus() {
palata (
<>taustaväri: "#A020F0", flex: 1}} />
</>
)
}
Tässä tulos:
Tässä määritit 1:n flex-arvoksi Näytä komponentti. The Näytä komponentti vie koko näytön (100 %), koska olet jakanut tilan yhteen ryhmään.
Katsotaanpa toista esimerkkiä:
tuonti Reagoi alkaen"reagoi"
tuonti { Tyylitaulukko, Näytä } alkaen"react-natiivi"
viedäoletuksenatoimintoSovellus() {
palata (taustaväri: "#A020F0", flex: 1}} /> taustaväri: "#7cb48f", flex: 3 }} />
</View>
)
}
Tässä tulos:
Tässä sinulla on kaksi Näytä elementtejä toisessa Näytä elementti. Ensimmäinen lapsi on valmis joustavuus: 1, ja toinen on asetettu joustavuus: 3. Nämä arvot jakavat tilan kahden lapsen välillä. Ensimmäinen vie 1/4 ruudusta, kun taas toinen 3/4 ruudusta (näyttö on jaettu 4 lohkoon, koska 1+3 = 4).
2. flexDirection-ominaisuuden käyttäminen React Nativessa
Jos katsot yllä olevaa kuvakaappausta, näet, että alatason elementit ovat päällekkäin. Tämä on flexboxin oletuskäyttäytyminen React Nativessa (flexDirection oletuksena sarakkeessa arvo).
Voit myös asettaa flexDirection omaisuutta rivi, sarake-käänteinen, ja rivi-käänteinen. Seuraavassa esimerkissä flexDirection on asetettu rivi, siksi alielementit sijoitetaan vierekkäin:
tuonti Reagoi alkaen"reagoi"
tuonti { Tyylitaulukko, Näytä } alkaen"react-natiivi"konst styles = StyleSheet.create({
kontti: {
taustaväri: "#00FF00",
flex: 1,
alignItems: "keskusta",
flexDirection: "rivi",
},
neliö: {
taustaväri: "#FF0000",
leveys: 98,
korkeus: 98,
marginaali: 4,
},
});
viedäoletuksenatoimintoSovellus() {
palata (
</View>
)
}
Tässä tulos:
Asettamalla flexDirection to rivi-käänteinen asettaa lapset vierekkäin, mutta se kääntää järjestyksen. Samoin, sarake-käänteinen asettaa lapset päällekkäin, mutta päinvastaisessa järjestyksessä kuin määrittynyt sarakkeessa.
3. JustifyContentin käyttäminen React Nativessa
The perustellaContent ominaisuus kohdistaa flexbox-säiliön alielementit ensisijaiselle akselille. Jos flexDirection on asetettu sarakkeessa, niin ensisijainen akseli on pystyakseli. Jos se on asetettu rivi, niin se on vaakasuorassa.
Mahdolliset arvot perustellaContentovat flex-start, joustava pää, keskusta, välilyönti, tilaa ympärillä, ja tilaa tasaisesti.
Seuraavassa esimerkissä flexDirection on asetettu riviin ja perustellaContenton asetettu flex-start:
tuonti Reagoi alkaen"reagoi"
tuonti { Tyylitaulukko, Näytä } alkaen"react-natiivi"konst styles = StyleSheet.create({
kontti: {
taustaväri: "#00FF00",
flex: 1,
perustellaContent: "flex-start",
flexDirection: "rivi",
},
neliö: {
taustaväri: "#FF0000",
leveys: 98,
korkeus: 98,
marginaali: 6,
},
});
viedäoletuksenatoimintoSovellus() {
palata (
</View>
)
}
Tässä tulos:
Jos muutat flexDirection to sarakkeessa, flex-start sovelletaan pystyakseliin. Joten laatikot pinotaan päällekkäin.
Asetus perustellaContent keskelle (kun pääakseli on a sarakkeessa) keskittää kolme lasten laatikkoa.
4. alignItemien käyttäminen React Nativessa
The alignItems ominaisuus määrittää kohteiden sijoittamisen flexbox-säiliöön toissijaista akselia pitkin. Tämä on vastakohta perustellaContent. Ihan kuin perustellaContent huolehtii pystysuorasta kohdistuksesta, alignItems hoitaa vaakasuuntauksen. Mahdolliset arvot alignItems ovat flex-start, joustava pää, keskusta, ja perusviiva.
Seuraavassa esimerkissä flexDirection on asetettu rivi ja alignItemson asetettu flex-start:
tuonti Reagoi alkaen"reagoi"
tuonti { Tyylitaulukko, Näytä } alkaen"react-natiivi"konst styles = StyleSheet.create({
kontti: {
taustaväri: "#00FF00",
flex: 1,
alignItems: "flex-start",
flexDirection: "rivi",
},
neliö: {
taustaväri: "#FF0000",
leveys: 98,
korkeus: 98,
marginaali: 6,
},
});
viedäoletuksenatoimintoSovellus() {
palata (
</View>
)
}
Tässä tulos:
Jos asetat flexDirection omaisuutta sarakkeessa ja alignItems to keskusta, laatikot asetetaan päällekkäin ja lapsielementit tasataan keskelle.
5. alignSelfin käyttäminen React Nativessa
The kohdista itse ominaisuus määrittää, kuinka yksittäisen alatason tulee kohdistaa itsensä säilöön. Se ohittaa alignItems, ja mahdolliset arvot ovat flex-start, joustava pää, keskusta, ja perusviiva.
Seuraavassa esimerkissä asetamme oletusarvon alignItems omaisuutta ja ohita se käyttämällä kohdista itse:
tuonti Reagoi alkaen"reagoi"
tuonti { Tyylitaulukko, Näytä } alkaen"react-natiivi"konst styles = StyleSheet.create({
kontti: {
taustaväri: "#00FF00",
flex: 1,
alignItems: "keskusta",
perustellaContent: "keskusta",
flexDirection: "rivi",
},
neliö: {
taustaväri: "#FF0000",
leveys: 98,
korkeus: 98,
marginaali: 6,
},
});
viedäoletuksenatoimintoSovellus() {
palata (kohdista itse: "flex-end" }]} /> kohdista itse: "flex-start" }]} />
)
}
Tässä tulos:
Muut Flexbox-ominaisuudet
Voit käyttää kahta muuta ominaisuutta luodessasi flexbox-asettelun React Nativessa:
- flexWrap: Jos säiliön lapset vuotavat yli siitä. Käyttää flexWrap määrittääksesi, kutistetaanko ne yhdelle riville vai kääritäänkö ne useiksi riveiksi. Mahdolliset arvot kohteelle flexWrap ovat nowrap ja kääri.
- aukko: Käytät aukko ominaisuus lisätäksesi rakoja säiliön ruudukon kohteiden väliin. Sen arvon tulee olla kohteiden väliin haluamasi raon koko. Voit määrittää aukko omaisuutta käyttämällä CSS-yksiköitä, kuten px, em tai rem.
Lue lisää React Nativesta
Nyt kun ymmärrät flexboxin ja osaat käyttää sitä React Native -sovelluksessasi joustavien ja reagoivien asettelujen luomiseen, sinun on aika perehtyä React Nativen ytimekkäisiin ominaisuuksiin.
