Sådan bruger du Flexbox i React Native

Flexbox er et CSS-værktøj, der lader dig bygge fleksible endimensionelle layouts. Det giver dig mulighed for at kontrollere placeringen af ​​elementer i en container, så du har mere kontrol over at præsentere dit indhold på skærmen.

Denne tutorial viser, hvordan du bruger flexbox i React Native til at bygge fleksible og responsive layouts. Du lærer, hvordan du placerer underordnede elementer af et containerelement ved hjælp af flexbox-egenskaber.

Sammenligning af Flexbox-adfærd i React Native og webudvikling

Hvis du vil organisere containerelementets indhold ved hjælp af flexbox i almindelig CSS, skal du bruge display: flex ejendom.

container { Skærm: bøje; }

Men med React Native behøver du ikke at indstille display: flex ejendom. Dette skyldes, at React Native som standard bruger flexbox til at bygge layouts.

Her er nogle forskelle at huske på hvordan flexbox opfører sig, når det bruges til at justere HTML-elementer i webapps kontra hvordan det opfører sig i React Native:

• flexDirection standard til række i webapplikationer, men er som standard kolonne i React Native.
• alignContent standard til strække i webapplikationer og flex-start i React Native.
• flexShrink standard til 1 i web og 0 i React Native.

Brug af Flexbox-egenskaber i React Native

Flexbox-egenskaber giver dig mulighed for at beskrive, hvordan du justerer containerelementets underordnede elementer. Du skal forstå disse egenskaber for at skabe komplekse layouts, der passer til din applikations behov.

1. Brug af flex-egenskaben i React Native

Det bøje ejendom bestemmer, hvordan Udsigt komponent fylder skærmen. Denne egenskab accepterer en heltalsværdi større end eller lig med 0. Værdien angiver brøkdelen af ​​skærmen Udsigt komponent skal tage fat.

I dette eksempel opretter du en skærm med en enkelt visning fra React Native-komponentbibliotek:

importere Reagere fra"reagere"
importere { StyleSheet, View } fra"reager-native"
eksportStandardfungereApp() {
Vend tilbage (
 <>
baggrundsfarve: "#A020F0", bøje: 1}} /> 
 </>
 )
}

Her er outputtet:

Her tildelte du 1'eren som flexværdien af Udsigt komponent. Det Udsigt komponent fylder hele skærmen (100%), fordi du har opdelt pladsen i én gruppe.

Lad os tage et kig på et andet eksempel:

importere Reagere fra"reagere"
importere { StyleSheet, View } fra"reager-native"
eksportStandardfungereApp() {
Vend tilbage (

baggrundsfarve: "#A020F0", bøje: 1}} />
baggrundsfarve: "#7cb48f", bøje: 3 }} /> 
 </View>
 )
}

Her er resultatet:

Her har du to Udsigt elementer i en anden Udsigt element. Det første barn er indstillet til flex: 1, og den anden er indstillet til flex: 3. Disse værdier deler rummet mellem de to børn. Den første fylder 1/4 af skærmen, mens den anden fylder 3/4 af skærmen (Skærmen er opdelt i 4 blokke, fordi 1+3 = 4).

2. Brug af flexDirection-egenskaben i React Native

Hvis du ser på ovenstående skærmbillede, vil du se, at de underordnede elementer er oven på hinanden. Dette er standardadfærden for flexbox i React Native (flexDirection er standard til kolonne værdi).

Du kan også indstille flexDirection ejendom til række, kolonne-omvendt, og række-omvendt. I det følgende eksempel, flexDirection er indstillet til række, derfor placeres de underordnede elementer side om side:

importere Reagere fra"reagere"
importere { StyleSheet, View } fra"reager-native"
konst styles = StyleSheet.create({
 beholder: {
 baggrundsfarve: "#00FF00",
 flex: 1,
 alignItems: "centrum",
 flexDirection: "række",
 },
 kvadrat: {
 baggrundsfarve: "#FF0000",
 bredde: 98,
 højde: 98,
 margin: 4,
 },
});
eksportStandardfungereApp() {
Vend tilbage (




 </View>
 )
}

Her er resultatet:

Indstilling af flexDirection til række-omvendt placerer børnene side om side, men det vender om rækkefølgen. Tilsvarende kolonne-omvendt placerer børnene oven på hinanden, men i modsat rækkefølge af den, der er defineret af kolonne.

3. Brug af justifyContent i React Native

Det retfærdig indhold egenskab justerer de underordnede elementer i en flexbox-beholder langs den primære akse. Hvis flexDirection er indstillet til kolonne, så er den primære akse den lodrette akse. Hvis det er sat til række, så er det vandret.

De mulige værdier af retfærdig indholder flex-start, flex-ende, centrum, mellemrum, plads-omkring, og plads-jævnt.

I det følgende eksempel, flexDirection er indstillet til at række og retfærdig indholder indstillet til flex-start:

importere Reagere fra"reagere"
importere { StyleSheet, View } fra"reager-native"
konst styles = StyleSheet.create({
 beholder: {
 baggrundsfarve: "#00FF00",
 flex: 1,
 justifyContent: "flex-start",
 flexDirection: "række",
 },
 kvadrat: {
 baggrundsfarve: "#FF0000",
 bredde: 98,
 højde: 98,
 margin: 6,
 },
});
eksportStandardfungereApp() {
Vend tilbage (




 </View>
 )
}

Her er outputtet:

Hvis du ændrer flexDirection til kolonne, flex-start vil gælde for den lodrette akse. Så kasserne vil blive stablet oven på hinanden.

Indstilling retfærdig indhold at centrere (mens primæraksen er a kolonne) centrerer de tre børnekasser.

4. Brug af alignItems i React Native

Det alignItems egenskab bestemmer placeringen af ​​varer i en flexbox-beholder langs den sekundære akse. Dette er det modsatte af retfærdig indhold. Ligesom retfærdig indhold tager sig af den lodrette justering, alignItems håndterer vandret justering. De mulige værdier af alignItems er flex-start, flex-ende, centrum, og baseline.

I det følgende eksempel, flexDirection er indstillet til række og alignItemser indstillet til flex-start:

importere Reagere fra"reagere"
importere { StyleSheet, View } fra"reager-native"
konst styles = StyleSheet.create({
 beholder: {
 baggrundsfarve: "#00FF00",
 flex: 1,
 alignItems: "flex-start",
 flexDirection: "række",
 },
 kvadrat: {
 baggrundsfarve: "#FF0000",
 bredde: 98,
 højde: 98,
 margin: 6,
 },
});
eksportStandardfungereApp() {
Vend tilbage (





 </View>
 )
}

Her er outputtet:

Hvis du indstiller flexDirection ejendom til kolonne og alignItems til centrum, vil kasserne blive placeret oven på hinanden, og børneelementerne vil være centreret.

5. Brug af alignSelf i React Native

Det alignSelv egenskab bestemmer, hvordan et individuelt barn skal placere sig i containeren. Det tilsidesætter alignItems, og de mulige værdier er flex-start, flex-ende, centrum, og baseline.

I det følgende eksempel angiver vi en standard alignItems ejendom og tilsidesætte det ved hjælp af alignSelv:

importere Reagere fra"reagere"
importere { StyleSheet, View } fra"reager-native"
konst styles = StyleSheet.create({
 beholder: {
 baggrundsfarve: "#00FF00",
 flex: 1,
 alignItems: "centrum", 
 justifyContent: "centrum", 
 flexDirection: "række",
 },
 kvadrat: {
 baggrundsfarve: "#FF0000",
 bredde: 98,
 højde: 98,
 margin: 6,
 },
});
eksportStandardfungereApp() {
Vend tilbage (


alignSelv: "flex-ende" }]} />
alignSelv: "flex-start" }]} /> 
 )
}

Her er resultatet:

Andre Flexbox-egenskaber

Der er to andre egenskaber, som du kan bruge, når du opretter et flexbox-layout i React Native:

• flexWrap: I tilfælde af at børnene i en beholder flyder ud af den. Brug flexWrap for at angive, om de skal krympes på en enkelt linje eller pakkes ind i flere linjer. Mulige værdier for flexWrap er nurap og indpakning.
• hul: Du bruger hul egenskab for at tilføje mellemrum mellem gitterelementerne i beholderen. Dens værdi skal være størrelsen af ​​det mellemrum, du ønsker mellem elementerne. Du kan angive hul ejendom ved hjælp af CSS-enheder som px, em eller rem.

Lær mere om React Native

Nu hvor du forstår flexbox og ved, hvordan du bruger den i din React Native-app til at skabe fleksible og responsive layouts, er det på tide, at du går ind i det nøgneste af React Native.