Iskoristite flexbox za izradu fleksibilnih i responzivnih izgleda u React Native.
Flexbox je CSS alat koji vam omogućuje izradu fleksibilnih jednodimenzionalnih izgleda. Omogućuje vam kontrolu položaja elemenata unutar spremnika tako da imate veću kontrolu nad predstavljanjem svog sadržaja na ekranu.
Ovaj vodič pokazuje kako koristiti flexbox u React Native za izradu fleksibilnih i responzivnih izgleda. Naučit ćete kako postaviti podređene stavke elementa spremnika pomoću svojstava flexboxa.
Usporedba ponašanja Flexboxa u React Native i web razvoju
Ako želite organizirati sadržaj elementa spremnika pomoću flexboxa u običnom CSS-u, morate koristiti zaslon: flex vlasništvo.
kontejner { prikaz: savijati; }Ali s React Native, ne morate postavljati zaslon: flex vlasništvo. To je zato što React Native prema zadanim postavkama koristi flexbox za izradu izgleda.
Evo nekih razlika koje treba imati na umu kako se flexbox ponaša kada se koristi za poravnavanje HTML elemenata u web aplikacijama u odnosu na to kako se ponaša u React Native:
- flexDirection zadano red u web aplikacijama, ali prema zadanim postavkama stupac u React Native.
- alignContent zadano protežu se u web aplikacijama i flex-start u React Native.
- flexShrink zadano je 1 u webu i 0 u React Native.
Korištenje Flexbox svojstava u React Native
Svojstva Flexboxa omogućuju vam da opišete kako poravnati podređene elemente elementa spremnika. Morate razumjeti ova svojstva kako biste stvorili složene izglede koji odgovaraju potrebama vaše aplikacije.
1. Korištenje svojstva flex u React Native
The savijati vlasništvo određuje kako Pogled komponenta ispunjava zaslon. Ovo svojstvo prihvaća cjelobrojnu vrijednost veću ili jednaku 0. Vrijednost određuje udio zaslona Pogled komponenta treba zauzeti.
U ovom primjeru stvarate zaslon s jednim prikazom iz React izvorna biblioteka komponenti:
uvoz Reagirati iz"reagirati"
uvoz {Stilski list, prikaz} iz"react-native"
izvozzadanofunkcijaaplikacija() {
povratak (
<>BackroundColor: "#A020F0", savijati: 1}} />
</>
)
}
Evo rezultata:
Ovdje ste dodijelili 1 kao vrijednost fleksibilnosti za Pogled komponenta. The Pogled komponenta zauzima cijeli ekran (100%) jer ste podijelili prostor u jednu grupu.
Pogledajmo još jedan primjer:
uvoz Reagirati iz"reagirati"
uvoz {Stilski list, prikaz} iz"react-native"
izvozzadanofunkcijaaplikacija() {
povratak (BackroundColor: "#A020F0", savijati: 1}} /> boja pozadine: "#7cb48f", savijati: 3 }} />
</View>
)
}
Evo ishoda:
Evo vam dva Pogled elemenata unutar drugog Pogled element. Prvo dijete postavljeno je na savijanje: 1, a drugi je postavljen na savijanje: 3. Te vrijednosti dijele prostor između dvoje djece. Prvi zauzima 1/4 ekrana dok drugi zauzima 3/4 ekrana (Ekran je podijeljen u 4 bloka jer je 1+3 = 4).
2. Korištenje svojstva flexDirection u React Native
Ako pogledate gornji snimak zaslona, vidjet ćete da su podređeni elementi jedan na drugom. Ovo je zadano ponašanje flexboxa u React Native (flexDirection zadano je stupac vrijednost).
Također možete postaviti flexDirection vlasništvo na red, stupac-revers, i red-obrnuti. U sljedećem primjeru, flexDirection postavljeno je na red, stoga su podređeni elementi postavljeni jedan pored drugog:
uvoz Reagirati iz"reagirati"
uvoz {Stilski list, prikaz} iz"react-native"konst stilovi = StyleSheet.create({
spremnik: {
boja pozadine: "#00FF00",
savijati: 1,
poravnati stavke: "centar",
flexDirection: "red",
},
kvadrat: {
boja pozadine: "#FF0000",
širina: 98,
visina: 98,
margina: 4,
},
});
izvozzadanofunkcijaaplikacija() {
povratak (
</View>
)
}
Evo ishoda:
Postavljanje flexDirection do red-obrnuti stavlja djecu jedno uz drugo, ali obrnutim redoslijedom. Slično tome, stupac-revers postavlja djecu jednu na drugu, ali u suprotnom redoslijedu od onog definiranog stupac.
3. Korištenje justifyContent u React Native
The justifyContent svojstvo poravnava podređene elemente flexbox spremnika duž primarne osi. Ako je flexDirection postavljeno je na stupac, tada je primarna os okomita os. Ako je postavljeno na red, onda je vodoravna.
Moguće vrijednosti justifyContentsu flex-start, savitljivi kraj, centar, razmak između, prostor-okolo, i prostorno ravnomjerno.
U sljedećem primjeru, flexDirection postavljen je na red i justifyContentpostavljeno je na flex-start:
uvoz Reagirati iz"reagirati"
uvoz {Stilski list, prikaz} iz"react-native"konst stilovi = StyleSheet.create({
spremnik: {
boja pozadine: "#00FF00",
savijati: 1,
justifyContent: "fleksibilni početak",
flexDirection: "red",
},
kvadrat: {
boja pozadine: "#FF0000",
širina: 98,
visina: 98,
margina: 6,
},
});
izvozzadanofunkcijaaplikacija() {
povratak (
</View>
)
}
Evo rezultata:
Ako promijenite flexDirection do stupac, flex-start primjenjivat će se na okomitu os. Tako će kutije biti naslagane jedna na drugu.
Postavka justifyContent u središte (dok je primarna os a stupac) centrira tri dječje kutije.
4. Korištenje alignItems u React Native
The alignItems svojstvo određuje smještaj stavki u flexbox spremnik duž sekundarne osi. Ovo je suprotno od justifyContent. Baš kao justifyContent vodi računa o okomitom poravnanju, alignItems upravlja vodoravnim poravnanjem. Moguće vrijednosti alignItems su flex-start, savitljivi kraj, centar, i Osnovna linija.
U sljedećem primjeru, flexDirection postavljeno je na red i alignItemspostavljeno je na flex-start:
uvoz Reagirati iz"reagirati"
uvoz {Stilski list, prikaz} iz"react-native"konst stilovi = StyleSheet.create({
spremnik: {
boja pozadine: "#00FF00",
savijati: 1,
poravnati stavke: "fleksibilni početak",
flexDirection: "red",
},
kvadrat: {
boja pozadine: "#FF0000",
širina: 98,
visina: 98,
margina: 6,
},
});
izvozzadanofunkcijaaplikacija() {
povratak (
</View>
)
}
Evo rezultata:
Ako postavite flexDirection vlasništvo na stupac i alignItems do centar, kutije će biti postavljene jedna na drugu, a podređeni elementi će biti poravnati po sredini.
5. Korištenje alignSelf u React Native
The alignSelf svojstvo određuje kako bi se pojedini dijete trebao poravnati u spremniku. To nadjačava alignItems, a moguće vrijednosti su flex-start, savitljivi kraj, centar, i Osnovna linija.
U sljedećem primjeru postavili smo zadanu vrijednost alignItems svojstvo i nadjačati ga pomoću alignSelf:
uvoz Reagirati iz"reagirati"
uvoz {Stilski list, prikaz} iz"react-native"konst stilovi = StyleSheet.create({
spremnik: {
boja pozadine: "#00FF00",
savijati: 1,
poravnati stavke: "centar",
justifyContent: "centar",
flexDirection: "red",
},
kvadrat: {
boja pozadine: "#FF0000",
širina: 98,
visina: 98,
margina: 6,
},
});
izvozzadanofunkcijaaplikacija() {
povratak (alignSelf: "savitljivi kraj" }]} /> alignSelf: "fleksibilni početak" }]} />
)
}
Evo ishoda:
Ostala svojstva Flexboxa
Postoje još dva svojstva koja možete koristiti kada stvarate flexbox raspored u React Native:
- flexWrap: U slučaju da se djeca spremnika prelijevaju iz njega. Koristiti flexWrap kako biste odredili trebaju li se skupiti u jednom redu ili omotati u više redaka. Moguće vrijednosti za flexWrap su Nowrap i omotati.
- praznina: Vi koristite praznina svojstvo za dodavanje praznina između stavki mreže u spremniku. Njegova bi vrijednost trebala biti veličina razmaka koji želite između stavki. Možete odrediti praznina vlasništvo koristeći CSS jedinice poput px, em ili rem.
Saznajte više o React Native
Sada kada razumijete flexbox i znate kako ga koristiti u svojoj aplikaciji React Native za stvaranje fleksibilnih i responzivnih izgleda, vrijeme je da uđete u detalje React Nativea.
