Benytt flexbox for å bygge fleksible og responsive layouter i React Native.

Flexbox er et CSS-verktøy som lar deg bygge fleksible endimensjonale oppsett. Den lar deg kontrollere plasseringen av elementer i en beholder, slik at du har mer kontroll over å presentere innholdet ditt på skjermen.

Denne opplæringen viser hvordan du bruker flexbox i React Native for å bygge fleksible og responsive layouter. Du lærer hvordan du plasserer underordnede elementer til et beholderelement ved å bruke flexbox-egenskaper.

Sammenligning av Flexbox-atferd i React Native og webutvikling

Hvis du vil organisere innholdet til containerelementet ved hjelp av flexbox i vanlig CSS, må du bruke display: flex eiendom.

container { vise: bøye; }

Men med React Native trenger du ikke stille inn display: flex eiendom. Dette er fordi React Native bruker flexbox som standard for å bygge oppsett.

Her er noen forskjeller du bør huske på hvordan flexbox oppfører seg når den brukes til å justere HTML-elementer i nettapper kontra hvordan den oppfører seg i React Native:

instagram viewer
  • flexDirection standard til rad i webapplikasjoner, men som standard kolonne i React Native.
  • alignContent standard til tøye ut i webapplikasjoner og flex-start i React Native.
  • flexShrink standard til 1 i web og 0 i React Native.

Bruke Flexbox-egenskaper i React Native

Flexbox-egenskaper lar deg beskrive hvordan du justerer de underordnede elementene til beholderelementet. Du må forstå disse egenskapene for å lage komplekse oppsett som passer til applikasjonens behov.

1. Bruke flex-egenskapen i React Native

De bøye seg eiendom bestemmer hvordan Utsikt komponent fyller skjermen. Denne egenskapen godtar en heltallsverdi større enn eller lik 0. Verdien spesifiserer brøkdelen av skjermen Utsikt komponenten skal ta opp.

I dette eksemplet lager du en skjerm med en enkelt visning fra React Native-komponentbibliotek:

import Reagere fra"reagere"
import { StyleSheet, View } fra"reager-innfødt"
eksportmisligholdefunksjonApp() {
komme tilbake (
 <>
bakgrunnsfarge: "#A020F0", bøye seg: 1}} /> 
 </>
 )
}

Her er utgangen:

Her tildelte du 1-en som flexverdien til Utsikt komponent. De Utsikt komponenten tar opp hele skjermen (100 %) fordi du har delt plassen i én gruppe.

La oss ta en titt på et annet eksempel:

import Reagere fra"reagere"
import { StyleSheet, View } fra"reager-innfødt"
eksportmisligholdefunksjonApp() {
komme tilbake (

bakgrunnsfarge: "#A020F0", bøye seg: 1}} />
bakgrunnsfarge: "#7cb48f", bøye seg: 3 }} /> 
 </View>
 )
}

Her er resultatet:

Her har du to Utsikt elementer i en annen Utsikt element. Det første barnet er satt til flex: 1, og den andre er satt til flex: 3. Disse verdiene deler rommet mellom de to barna. Den første tar opp 1/4 av skjermen mens den andre tar opp 3/4 av skjermen (skjermen er delt inn i 4 blokker fordi 1+3 = 4).

2. Bruke flexDirection-egenskapen i React Native

Hvis du ser på skjermbildet ovenfor, vil du se at de underordnede elementene er oppå hverandre. Dette er standardoppførselen til flexbox i React Native (flexDirection er standard til kolonne verdi).

Du kan også stille inn flexDirection eiendom til rad, kolonne-revers, og rad-revers. I følgende eksempel, flexDirection er satt til rad, derfor er de underordnede elementene plassert side ved side:

import Reagere fra"reagere"
import { StyleSheet, View } fra"reager-innfødt"
konst styles = StyleSheet.create({
 beholder: {
 bakgrunnsfarge: "#00FF00",
 flex: 1,
 alignItems: "senter",
 flexDirection: "rad",
 },
 torget: {
 bakgrunnsfarge: "#FF0000",
 bredde: 98,
 høyde: 98,
 margin: 4,
 },
});
eksportmisligholdefunksjonApp() {
komme tilbake (




 </View>
 )
}

Her er resultatet:

Innstilling av flexDirection til rad-revers plasserer barna side ved side, men det snur rekkefølgen. På samme måte kolonne-revers plasserer barna oppå hverandre, men i motsatt rekkefølge til den som er definert av kolonne.

3. Bruke justifyContent i React Native

De begrunn innholdet egenskap justerer de underordnede elementene til en flexbox-beholder langs primæraksen. Hvis flexDirection er satt til kolonne, så er primæraksen den vertikale aksen. Hvis den er satt til rad, så er det horisontalt.

De mulige verdiene av begrunn innholdeter flex-start, flex-ende, senter, mellomrom, plass rundt, og plass-jevnt.

I følgende eksempel, flexDirection er satt til rad og begrunn innholdeter satt til flex-start:

import Reagere fra"reagere"
import { StyleSheet, View } fra"reager-innfødt"
konst styles = StyleSheet.create({
 beholder: {
 bakgrunnsfarge: "#00FF00",
 flex: 1,
 justifyContent: "flex-start",
 flexDirection: "rad",
 },
 torget: {
 bakgrunnsfarge: "#FF0000",
 bredde: 98,
 høyde: 98,
 margin: 6,
 },
});
eksportmisligholdefunksjonApp() {
komme tilbake (




 </View>
 )
}

Her er utgangen:

Hvis du endrer flexDirection til kolonne, flex-start vil gjelde for den vertikale aksen. Så boksene vil stables oppå hverandre.

Innstilling begrunn innholdet å sentrere (mens primæraksen er a kolonne) sentrerer de tre barneboksene.

4. Bruke alignItems i React Native

De alignItems egenskap bestemmer plasseringen av varer i en flexbox-beholder langs sekundæraksen. Dette er det motsatte av begrunn innholdet. Akkurat som begrunn innholdet tar seg av den vertikale justeringen, alignItems håndterer horisontal justering. De mulige verdiene av alignItems er flex-start, flex-ende, senter, og grunnlinje.

I følgende eksempel, flexDirection er satt til rad og alignItemser satt til flex-start:

import Reagere fra"reagere"
import { StyleSheet, View } fra"reager-innfødt"
konst styles = StyleSheet.create({
 beholder: {
 bakgrunnsfarge: "#00FF00",
 flex: 1,
 alignItems: "flex-start",
 flexDirection: "rad",
 },
 torget: {
 bakgrunnsfarge: "#FF0000",
 bredde: 98,
 høyde: 98,
 margin: 6,
 },
});
eksportmisligholdefunksjonApp() {
komme tilbake (





 </View>
 )
}

Her er utgangen:

Hvis du stiller inn flexDirection eiendom til kolonne og alignItems til senter, vil boksene plasseres oppå hverandre, og barneelementene vil være midtstilt.

5. Bruke alignSelf i React Native

De alignSelv egenskapen bestemmer hvordan et enkelt barn skal justere seg i beholderen. Den overstyrer alignItems, og de mulige verdiene er flex-start, flex-ende, senter, og grunnlinje.

I følgende eksempel angir vi en standard alignItems eiendom og overstyre den ved å bruke alignSelv:

import Reagere fra"reagere"
import { StyleSheet, View } fra"reager-innfødt"
konst styles = StyleSheet.create({
 beholder: {
 bakgrunnsfarge: "#00FF00",
 flex: 1,
 alignItems: "senter", 
 justifyContent: "senter", 
 flexDirection: "rad",
 },
 torget: {
 bakgrunnsfarge: "#FF0000",
 bredde: 98,
 høyde: 98,
 margin: 6,
 },
});
eksportmisligholdefunksjonApp() {
komme tilbake (


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

Her er resultatet:

Andre Flexbox-egenskaper

Det er to andre egenskaper du kan bruke når du lager et flexbox-oppsett i React Native:

  • flexWrap: I tilfelle barna til en beholder renner over ut av den. Bruk flexWrap for å spesifisere om de skal krympes på en enkelt linje eller pakkes inn i flere linjer. Mulige verdier for flexWrap er nowrap og pakke inn.
  • mellomrom: Du bruker mellomrom egenskap for å legge til mellomrom mellom rutenettelementene i beholderen. Verdien bør være størrelsen på gapet du ønsker mellom elementene. Du kan spesifisere mellomrom eiendom ved å bruke CSS-enheter som px, em eller rem.

Lær mer om React Native

Nå som du forstår flexbox og vet hvordan du bruker den i React Native-appen din for å lage fleksible og responsive layouter, er det på tide for deg å gå inn i det nøkterne til React Native.