Kasutage flexboxi, et luua React Native'is paindlikud ja tundlikud paigutused.

Flexbox on CSS-i tööriist, mis võimaldab teil luua paindlikke ühemõõtmelisi paigutusi. See võimaldab teil kontrollida elementide asukohta konteineris, nii et teil on suurem kontroll oma sisu ekraanil esitamise üle.

See õpetus näitab, kuidas kasutada flexboxi rakenduses React Native paindlike ja tundlike paigutuste loomiseks. Saate teada, kuidas positsioneerida konteinerielemendi alamüksusi, kasutades flexboxi atribuute.

Flexboxi käitumise võrdlemine React Native'is ja veebiarenduses

Kui soovite korraldada konteineri elemendi sisu flexboxi abil lihtsas CSS-is, peate kasutama ekraan: flex vara.

konteiner { kuva: flex; }

Kuid React Native'i abil ei pea te määrama ekraan: flex vara. Selle põhjuseks on asjaolu, et React Native kasutab paigutuste koostamiseks vaikimisi flexboxi.

Siin on mõned erinevused, mida meeles pidada kuidas flexbox käitub HTML-i elementide joondamiseks veebirakendustes võrreldes sellega, kuidas see React Native'is käitub:

instagram viewer
  • flexDirection vaikimisi rida veebirakendustes, kuid vaikimisi veerg rakenduses React Native.
  • joondadaSisu vaikimisi venitada veebirakendustes ja flex-start rakenduses React Native.
  • flexShrink vaikimisi on veebis 1 ja React Native'is 0.

Flexboxi atribuutide kasutamine rakenduses React Native

Flexboxi atribuudid võimaldavad kirjeldada, kuidas joondada konteinerielemendi alamelemente. Peate neid omadusi mõistma, et luua keerukaid paigutusi, mis sobivad teie rakenduse vajadustega.

1. Paindliku atribuudi kasutamine rakenduses React Native

The painduv omadus määrab, kuidas Vaade komponent täidab ekraani. See atribuut aktsepteerib täisarvu väärtust, mis on suurem või võrdne 0-ga. Väärtus määrab ekraani osa Vaade komponent peaks võtma.

Selles näites loote ekraani, millel on üks vaade React Native komponentide teek:

importida Reageerige alates"reageerida"
importida { Style Sheet, View } alates"reageer-native"
eksportidavaikimisifunktsiooniRakendus() {
tagasi (
 <>
taustavärv: "#A020F0", painduv: 1}} /> 
 </>
 )
}

Siin on väljund:

Siin määrasite 1 paindeväärtuseks Vaade komponent. The Vaade komponent võtab kogu ekraani (100%), kuna jagasite ruumi üheks rühmaks.

Vaatame veel ühte näidet:

importida Reageerige alates"reageerida"
importida { Style Sheet, View } alates"reageer-native"
eksportidavaikimisifunktsiooniRakendus() {
tagasi (

taustavärv: "#A020F0", painduv: 1}} />
taustavärv: "#7cb48f", painduv: 3 }} /> 
 </View>
 )
}

Siin on tulemus:

Siin on teil kaks Vaade elemendid teises Vaade element. Esimene laps on valmis paindumine: 1ja teine ​​on seatud paindumine: 3. Need väärtused jagavad ruumi kahe lapse vahel. Esimene võtab enda alla 1/4 ekraanist, teine ​​aga 3/4 ekraanist (ekraan on jagatud 4 plokiks, kuna 1+3 = 4).

2. Atribuudi flexDirection kasutamine rakenduses React Native

Kui vaatate ülaltoodud ekraanipilti, näete, et alamelemendid on üksteise peal. See on flexboxi vaikekäitumine rakenduses React Native (flexDirection vaikeväärtuseks veerg väärtus).

Samuti saate määrata flexDirection vara juurde rida, veerg-tagurpidi, ja rida-tagurpidi. Järgmises näites flexDirection on seatud rida, seetõttu asetatakse alamelemendid kõrvuti:

importida Reageerige alates"reageerida"
importida { Style Sheet, View } alates"reageer-native"
konst styles = StyleSheet.create({
 konteiner: {
 taustavärv: "#00FF00",
 paindumine: 1,
 joonda üksused: "Keskus",
 flexDirection: "rida",
 },
 ruut: {
 taustavärv: "#FF0000",
 laius: 98,
 kõrgus: 98,
 marginaal: 4,
 },
});
eksportidavaikimisifunktsiooniRakendus() {
tagasi (




 </View>
 )
}

Siin on tulemus:

Seadistades flexDirection juurde rida-tagurpidi asetab lapsed kõrvuti, kuid see muudab järjestuse vastupidiseks. Samamoodi on veerg-tagurpidi asetab lapsed üksteise peale, kuid vastupidises järjestuses kui määratletud veerg.

3. JustifyContenti kasutamine rakenduses React Native

The õigustaSisu atribuut joondab flexbox konteineri alamelemendid piki põhitelge. Kui flexDirection on seatud veerg, siis on põhitelg vertikaaltelg. Kui see on seatud rida, siis on see horisontaalne.

Võimalikud väärtused õigustaSisuon flex-start, painduv ots, Keskus, tühik-vahel, ruumi ümber, ja ruumiliselt ühtlaselt.

Järgmises näites flexDirection on seatud rida ja õigustaSisuon seatud flex-start:

importida Reageerige alates"reageerida"
importida { Style Sheet, View } alates"reageer-native"
konst styles = StyleSheet.create({
 konteiner: {
 taustavärv: "#00FF00",
 paindumine: 1,
 õigustaSisu: "flex-start",
 flexDirection: "rida",
 },
 ruut: {
 taustavärv: "#FF0000",
 laius: 98,
 kõrgus: 98,
 marginaal: 6,
 },
});
eksportidavaikimisifunktsiooniRakendus() {
tagasi (




 </View>
 )
}

Siin on väljund:

Kui muudate flexDirection juurde veerg, flex-start rakendub vertikaalteljele. Nii laotakse kastid üksteise peale.

Seadistamine õigustaSisu keskele (samas kui põhitelg on a veerg) tsentreerib kolm lastekasti.

4. alignItemsi kasutamine rakenduses React Native

The joondadaItems atribuut määrab üksuste paigutuse flexboxi konteineris piki sekundaarset telge. See on vastupidine õigustaSisu. Just nagu õigustaSisu hoolitseb vertikaalse joondamise eest, joondadaItems tegeleb horisontaalse joondamisega. Võimalikud väärtused joondadaItems on flex-start, painduv ots, Keskus, ja baasjoon.

Järgmises näites flexDirection on seatud rida ja joondadaItemson seatud flex-start:

importida Reageerige alates"reageerida"
importida { Style Sheet, View } alates"reageer-native"
konst styles = StyleSheet.create({
 konteiner: {
 taustavärv: "#00FF00",
 paindumine: 1,
 joonda üksused: "flex-start",
 flexDirection: "rida",
 },
 ruut: {
 taustavärv: "#FF0000",
 laius: 98,
 kõrgus: 98,
 marginaal: 6,
 },
});
eksportidavaikimisifunktsiooniRakendus() {
tagasi (





 </View>
 )
}

Siin on väljund:

Kui määrate flexDirection vara juurde veerg ja joondadaItems juurde Keskus, asetatakse kastid üksteise peale ja lasteelemendid joondatakse keskele.

5. alignSelfi kasutamine rakenduses React Native

The joondada ise atribuut määrab, kuidas konkreetne laps end konteineris joondada. See alistab joondadaItems, ja võimalikud väärtused on flex-start, painduv ots, Keskus, ja baasjoon.

Järgmises näites määrame vaikeväärtuse joondadaItems atribuut ja seda kasutades alistada joondada ise:

importida Reageerige alates"reageerida"
importida { Style Sheet, View } alates"reageer-native"
konst styles = StyleSheet.create({
 konteiner: {
 taustavärv: "#00FF00",
 paindumine: 1,
 joonda üksused: "Keskus", 
 õigustaSisu: "Keskus", 
 flexDirection: "rida",
 },
 ruut: {
 taustavärv: "#FF0000",
 laius: 98,
 kõrgus: 98,
 marginaal: 6,
 },
});
eksportidavaikimisifunktsiooniRakendus() {
tagasi (


joondada ise: "flex-end" }]} />
joondada ise: "flex-start" }]} /> 
 )
}

Siin on tulemus:

Muud Flexboxi omadused

React Native'is flexboxi paigutuse loomisel saate kasutada veel kahte atribuuti.

  • flexWrap: Kui konteineri lapsed voolavad sellest üle. Kasutage flexWrap et määrata, kas need tuleks kahandada ühele reale või koondada mitmeks reale. Võimalikud väärtused flexWrap on nowrap ja mähis.
  • lõhe: Sa kasutad lõhe atribuut konteineris olevate ruudustikuüksuste vahele tühikute lisamiseks. Selle väärtus peaks olema esemete vahel soovitud vahe suurus. Saate täpsustada lõhe vara kasutades CSS-i ühikuid, nagu px, em või rem.

Lisateave React Native'i kohta

Nüüd, kui mõistate flexboxi ja teate, kuidas seda oma rakenduses React Native kasutada paindlike ja tundlike paigutuste loomiseks, on teil aeg tutvuda React Native'i keeruliste asjadega.