Kako uporabljati Flexbox v React Native

Flexbox je orodje CSS, ki vam omogoča izdelavo prilagodljivih enodimenzionalnih postavitev. Omogoča vam nadzor nad položajem elementov znotraj vsebnika, tako da imate večji nadzor nad predstavitvijo vaše vsebine na zaslonu.

Ta vadnica prikazuje, kako uporabiti flexbox v React Native za izdelavo prilagodljivih in odzivnih postavitev. Naučili se boste, kako postaviti podrejene elemente elementa vsebnika z uporabo lastnosti flexbox.

Primerjava vedenja Flexboxa v React Native in spletnem razvoju

Če želite organizirati vsebino elementa vsebnika z uporabo flexboxa v navadnem CSS, morate uporabiti zaslon: flex premoženje.

vsebnik { zaslon: flex; }

Toda z React Native vam ni treba nastaviti zaslon: flex premoženje. To je zato, ker React Native privzeto uporablja flexbox za izdelavo postavitev.

Tukaj je nekaj razlik, na katere morate biti pozorni kako se flexbox obnaša, ko se uporablja za poravnavo elementov HTML v spletnih aplikacijah v primerjavi s tem, kako se obnaša v React Native:

• flexDirection privzeto vrstica v spletnih aplikacijah, vendar privzeto stolpec v React Native.
• alignContent privzeto raztegniti v spletnih aplikacijah in flex-start v React Native.
• flexShrink privzeto 1 v spletu in 0 v React Native.

Uporaba lastnosti Flexbox v React Native

Lastnosti Flexbox vam omogočajo, da opišete, kako poravnati podrejene elemente elementa vsebnika. Te lastnosti morate razumeti, če želite ustvariti kompleksne postavitve, ki ustrezajo potrebam vaše aplikacije.

1. Uporaba lastnosti flex v React Native

The flex lastnina določa, kako Pogled komponenta zapolni zaslon. Ta lastnost sprejme celoštevilsko vrednost, ki je večja ali enaka 0. Vrednost določa delež zaslona Pogled komponenta bi morala zavzeti.

V tem primeru ustvarjate zaslon z enim pogledom iz Knjižnica izvornih komponent React:

uvoz Reagiraj od"reagirati"
uvoz {Slogovna tabela, pogled} od"react-native"
izvozprivzetofunkcijoaplikacija() {
vrnitev (
 <>
BackroundColor: "#A020F0", flex: 1}} /> 
 </>
 )
}

Tukaj je rezultat:

Tukaj ste dodelili 1 kot vrednost flex za Pogled komponento. The Pogled komponenta zavzame celoten zaslon (100 %), ker ste prostor razdelili v eno skupino.

Oglejmo si še en primer:

uvoz Reagiraj od"reagirati"
uvoz {Slogovna tabela, pogled} od"react-native"
izvozprivzetofunkcijoaplikacija() {
vrnitev (

BackroundColor: "#A020F0", flex: 1}} />
Barva ozadja: "#7cb48f", flex: 3 }} /> 
 </View>
 )
}

Tukaj je rezultat:

Tukaj imate dva Pogled elementov znotraj drugega Pogled element. Prvi otrok je nastavljen na upogib: 1, drugi pa je nastavljen na upogib: 3. Te vrednote delijo prostor med otrokoma. Prvi zavzema 1/4 zaslona, ​​drugi pa 3/4 zaslona (zaslon je razdeljen na 4 bloke, ker je 1+3 = 4).

2. Uporaba lastnosti flexDirection v React Native

Če pogledate zgornji posnetek zaslona, ​​boste videli, da so podrejeni elementi drug na drugem. To je privzeto vedenje flexboxa v React Native (flexDirection privzeto na stolpec vrednost).

Nastavite lahko tudi flexDirection premoženje do vrstica, stolpec-obraten, in vrstica-obratna. V naslednjem primeru flexDirection je nastavljeno na vrstica, zato so podrejeni elementi postavljeni drug ob drugem:

uvoz Reagiraj od"reagirati"
uvoz {Slogovna tabela, pogled} od"react-native"
konst styles = StyleSheet.create({
 vsebnik: {
 Barva ozadja: "#00FF00",
 upogib: 1,
 alignItems: "center",
 flexDirection: "vrstica",
 },
 kvadrat: {
 Barva ozadja: "#FF0000",
 premer: 98,
 višina: 98,
 rob: 4,
 },
});
izvozprivzetofunkcijoaplikacija() {
vrnitev (




 </View>
 )
}

Tukaj je rezultat:

Nastavitev flexDirection do vrstica-obratna otroke postavi drug ob drugem, vendar obrne vrstni red. Podobno je stolpec-obraten postavlja otroke enega na drugega, vendar v nasprotnem zaporedju od tistega, ki ga določa stolpec.

3. Uporaba justifyContent v React Native

The justifyContent lastnost poravna podrejene elemente vsebnika flexbox vzdolž primarne osi. Če je flexDirection je nastavljeno na stolpec, potem je primarna os navpična os. Če je nastavljeno na vrstica, potem je vodoravna.

Možne vrednosti justifyContentso flex-start, flex-end, center, presledek med, prostor-okoli, in prostorsko enakomerno.

V naslednjem primeru flexDirection je nastavljen na vrstico in justifyContentje nastavljeno na flex-start:

uvoz Reagiraj od"reagirati"
uvoz {Slogovna tabela, pogled} od"react-native"
konst styles = StyleSheet.create({
 vsebnik: {
 Barva ozadja: "#00FF00",
 upogib: 1,
 justifyContent: "flex-start",
 flexDirection: "vrstica",
 },
 kvadrat: {
 Barva ozadja: "#FF0000",
 premer: 98,
 višina: 98,
 rob: 6,
 },
});
izvozprivzetofunkcijoaplikacija() {
vrnitev (




 </View>
 )
}

Tukaj je rezultat:

Če spremenite flexDirection do stolpec, flex-start bo veljal za navpično os. Tako bodo škatle zložene ena na drugo.

Nastavitev justifyContent v središče (medtem ko je primarna os a stolpec) sredi tri podrejene škatle.

4. Uporaba alignItems v React Native

The alignItems Lastnost določa postavitev elementov v vsebniku flexbox vzdolž sekundarne osi. To je nasprotje od justifyContent. Tako kot justifyContent skrbi za navpično poravnavo, alignItems skrbi za vodoravno poravnavo. Možne vrednosti alignItems so flex-start, flex-end, center, in izhodišče.

V naslednjem primeru flexDirection je nastavljeno na vrstica in alignItemsje nastavljeno na flex-start:

uvoz Reagiraj od"reagirati"
uvoz {Slogovna tabela, pogled} od"react-native"
konst styles = StyleSheet.create({
 vsebnik: {
 Barva ozadja: "#00FF00",
 upogib: 1,
 alignItems: "flex-start",
 flexDirection: "vrstica",
 },
 kvadrat: {
 Barva ozadja: "#FF0000",
 premer: 98,
 višina: 98,
 rob: 6,
 },
});
izvozprivzetofunkcijoaplikacija() {
vrnitev (





 </View>
 )
}

Tukaj je rezultat:

Če nastavite flexDirection premoženje do stolpec in alignItems do center, bodo polja postavljena ena na drugo, podrejeni elementi pa bodo poravnani na sredino.

5. Uporaba alignSelf v React Native

The alignSelf lastnost določa, kako naj se posamezen otrok poravna v vsebniku. Preglasi alignItems, možne vrednosti pa so flex-start, flex-end, center, in izhodišče.

V naslednjem primeru smo nastavili privzeto alignItems in jo preglasite z uporabo alignSelf:

uvoz Reagiraj od"reagirati"
uvoz {Slogovna tabela, pogled} od"react-native"
konst styles = StyleSheet.create({
 vsebnik: {
 Barva ozadja: "#00FF00",
 upogib: 1,
 alignItems: "center", 
 justifyContent: "center", 
 flexDirection: "vrstica",
 },
 kvadrat: {
 Barva ozadja: "#FF0000",
 premer: 98,
 višina: 98,
 rob: 6,
 },
});
izvozprivzetofunkcijoaplikacija() {
vrnitev (


alignSelf: "flex-end" }]} />
alignSelf: "flex-start" }]} /> 
 )
}

Tukaj je rezultat:

Druge lastnosti Flexbox

Obstajata še dve lastnosti, ki ju lahko uporabite pri ustvarjanju postavitve flexbox v React Native:

• flexWrap: V primeru, da se otroci posode prelijejo iz nje. Uporaba flexWrap da določite, ali naj bodo skrčene v eno vrstico ali zavite v več vrstic. Možne vrednosti za flexWrap so nowrap in zaviti.
• vrzel: Uporabljate vrzel lastnost za dodajanje vrzeli med elementi mreže v vsebniku. Njegova vrednost mora biti velikost razmika, ki ga želite med elementi. Določite lahko vrzel premoženje z uporabo enot CSS, kot so px, em ali rem.

Izvedite več o React Native

Zdaj, ko razumete flexbox in veste, kako ga uporabiti v svoji aplikaciji React Native za ustvarjanje prilagodljivih in odzivnih postavitev, je čas, da se podate v podrobnosti React Native.