Folosiți flexbox pentru a crea machete flexibile și receptive în React Native.
Flexbox este un instrument CSS care vă permite să creați machete flexibile unidimensionale. Vă permite să controlați poziția elementelor dintr-un container, astfel încât să aveți mai mult control asupra prezentării conținutului dvs. pe ecran.
Acest tutorial demonstrează cum să utilizați flexbox în React Native pentru a crea machete flexibile și receptive. Veți învăța cum să poziționați elementele secundare ale unui element container folosind proprietățile flexbox.
Compararea comportamentului Flexbox în React Native și Web Development
Dacă doriți să organizați conținutul elementului container folosind flexbox în CSS simplu, trebuie să utilizați display: flex proprietate.
container { afişa: contracta; }Dar cu React Native, nu trebuie să setați display: flex proprietate. Acest lucru se datorează faptului că React Native folosește flexbox în mod implicit pentru a construi machete.
Iată câteva diferențe de care trebuie să țineți cont
cum se comportă flexbox atunci când este utilizat pentru a alinia elemente HTML în aplicațiile web față de modul în care se comportă în React Native:- flexDirection implicit la rând în aplicațiile web, dar implicit coloană în React Native.
- alignContent implicit la întinde în aplicaţii web şi flex-start în React Native.
- flexShrink implicit la 1 în web și 0 în React Native.
Utilizarea proprietăților Flexbox în React Native
Proprietățile Flexbox vă permit să descrieți cum să aliniați elementele secundare ale elementului container. Trebuie să înțelegeți aceste proprietăți pentru a crea machete complexe care se potrivesc nevoilor aplicației dvs.
1. Utilizarea proprietății flex în React Native
The contracta proprietatea determină modul în care Vedere componenta umple ecranul. Această proprietate acceptă o valoare întreagă mai mare sau egală cu 0. Valoarea specifică fracțiunea de ecran Vedere componenta ar trebui să preia.
În acest exemplu, creați un ecran cu o singură vizualizare din Biblioteca de componente React Native:
import Reacţiona din"reacţiona"
import { Style Sheet, View } din"react-nativ"
exportMod implicitfuncţieApp() {
întoarcere (
<>backroundColor: „#A020F0”, contracta: 1}} />
</>
)
}
Iată rezultatul:
Aici ați atribuit 1 ca valoare flexibilă a Vedere componentă. The Vedere componenta ocupă întregul ecran (100%), deoarece ați împărțit spațiul într-un singur grup.
Să aruncăm o privire la un alt exemplu:
import Reacţiona din"reacţiona"
import { Style Sheet, View } din"react-nativ"
exportMod implicitfuncţieApp() {
întoarcere (backroundColor: „#A020F0”, contracta: 1}} /> culoare de fundal: „#7cb48f”, contracta: 3 }} />
</View>
)
}
Iată rezultatul:
Aici ai două Vedere elemente din cadrul altuia Vedere element. Primul copil este setat să flex: 1, iar al doilea este setat la flex: 3. Aceste valori împart spațiul dintre cei doi copii. Primul ocupă 1/4 din ecran, în timp ce al doilea ocupă 3/4 din ecran (Ecranul este împărțit în 4 blocuri deoarece 1+3 = 4).
2. Utilizarea proprietății flexDirection în React Native
Dacă vă uitați la captura de ecran de mai sus, veți vedea că elementele copil sunt unele peste altele. Acesta este comportamentul implicit al flexbox în React Native (flexDirection implicit la coloană valoare).
De asemenea, puteți seta flexDirection proprietate la rând, coloană-invers, și rând-invers. În exemplul următor, flexDirection este setat sa rând, prin urmare elementele copil sunt plasate unul lângă altul:
import Reacţiona din"reacţiona"
import { Style Sheet, View } din"react-nativ"const stiluri = StyleSheet.create({
container: {
culoare de fundal: „#00FF00”,
contracta: 1,
alignItems: "centru",
flexDirection: "rând",
},
pătrat: {
culoare de fundal: „#FF0000”,
lăţime: 98,
înălţime: 98,
marja: 4,
},
});
exportMod implicitfuncţieApp() {
întoarcere (
</View>
)
}
Iată rezultatul:
Setarea flexDirection la rând-invers pune copiii unul lângă altul, dar inversează ordinea. În mod similar, cel coloană-invers plasează copiii unul peste altul dar în ordinea opusă celei definite de coloană.
3. Utilizarea justifyContent în React Native
The justifyContent proprietatea aliniază elementele copil ale unui container flexbox de-a lungul axei primare. Dacă flexDirection este setat sa coloană, atunci axa primară este axa verticală. Dacă este setat la rând, apoi este orizontal.
Valorile posibile ale justifyContentsunt flex-start, flex-end, centru, spațiu-între, spatiu-in jur, și spațiu-uniform.
În exemplul următor, flexDirection este setat la row si justifyContenteste setat sa flex-start:
import Reacţiona din"reacţiona"
import { Style Sheet, View } din"react-nativ"const stiluri = StyleSheet.create({
container: {
culoare de fundal: „#00FF00”,
contracta: 1,
justifyContent: "flex-start",
flexDirection: "rând",
},
pătrat: {
culoare de fundal: „#FF0000”,
lăţime: 98,
înălţime: 98,
marja: 6,
},
});
exportMod implicitfuncţieApp() {
întoarcere (
</View>
)
}
Iată rezultatul:
Dacă schimbați flexDirection la coloană, flex-start se va aplica pe axa verticală. Deci, cutiile vor fi stivuite una peste alta.
Setare justifyContent spre centru (în timp ce axa primară este a coloană) centrează cele trei cutii de copii.
4. Utilizarea alignItems în React Native
The alignItems proprietatea determină plasarea articolelor într-un container flexbox de-a lungul axei secundare. Acesta este opusul justifyContent. Exact ca justifyContent are grijă de alinierea verticală, alignItems se ocupă de alinierea orizontală. Valorile posibile ale alignItems sunt flex-start, flex-end, centru, și de bază.
În exemplul următor, flexDirection este setat sa rând și alignItemseste setat sa flex-start:
import Reacţiona din"reacţiona"
import { Style Sheet, View } din"react-nativ"const stiluri = StyleSheet.create({
container: {
culoare de fundal: „#00FF00”,
contracta: 1,
alignItems: "flex-start",
flexDirection: "rând",
},
pătrat: {
culoare de fundal: „#FF0000”,
lăţime: 98,
înălţime: 98,
marja: 6,
},
});
exportMod implicitfuncţieApp() {
întoarcere (
</View>
)
}
Iată rezultatul:
Dacă setați flexDirection proprietate la coloană și alignItems la centru, cutiile vor fi amplasate una peste alta, iar elementele copii vor fi aliniate la centru.
5. Folosind alignSelf în React Native
The alignSelf proprietatea determină modul în care un copil individual ar trebui să se alinieze în container. Ea trece peste alignItems, iar valorile posibile sunt flex-start, flex-end, centru, și de bază.
În exemplul următor, setăm o valoare implicită alignItems proprietate și înlocuiți-o folosind alignSelf:
import Reacţiona din"reacţiona"
import { Style Sheet, View } din"react-nativ"const stiluri = StyleSheet.create({
container: {
culoare de fundal: „#00FF00”,
contracta: 1,
alignItems: "centru",
justifyContent: "centru",
flexDirection: "rând",
},
pătrat: {
culoare de fundal: „#FF0000”,
lăţime: 98,
înălţime: 98,
marja: 6,
},
});
exportMod implicitfuncţieApp() {
întoarcere (alignSelf: "flex-end" }]} /> alignSelf: "flex-start" }]} />
)
}
Iată rezultatul:
Alte proprietăți Flexbox
Există alte două proprietăți pe care le puteți utiliza atunci când creați un aspect flexbox în React Native:
- flexWrap: În cazul în care copiii unui recipient se revarsă din el. Utilizare flexWrap pentru a specifica dacă ar trebui să fie micșorate pe o singură linie sau înfășurate în mai multe linii. Valori posibile pentru flexWrap sunt nowrap și înfășura.
- decalaj: Folosești decalaj proprietate de a adăuga spații între elementele grilei din container. Valoarea sa ar trebui să fie dimensiunea distanței pe care o doriți între elemente. Puteți specifica decalaj proprietate folosind unități CSS precum px, em sau rem.
Aflați mai multe despre React Native
Acum că înțelegi flexbox și știi cum să-l folosești în aplicația React Native pentru a crea machete flexibile și receptive, este timpul să intri în esențialul React Native.
