Share
I denne opplæringen lærer du hvordan du legger ut React native apps og hvordan du implementerer layouter som ofte brukes i apper. Dette inkluderer Stack Layout, Grid Layout, og Absolutt Layout. Jeg antar at du allerede vet grunnleggende om styling en React Native app og hvordan du bruker CSS generelt, så jeg vil ikke dvele for mye på StyleSheet.create og hvordan du legger til styling til forskjellige elementer.
Du kan finne full kildekode for denne opplæringen på GitHub.
For å gjøre det enkelt, bruker vi React Native for Web. Med React Native for Web Starter kan vi enkelt spinne opp et nytt React Native-prosjekt som kan kjøre i nettleseren. Denne koden er 100% kompatibel med React Native-prosjektet. Vi lager en egen komponent for hver layout som vi skal implementere, slik at du enkelt kan importere dem til et normalt React Native-prosjekt hvis du vil. Vi bruker bare React Native for Web fordi det er lettere å få det opp og ned.
Du kan utføre følgende kommandoer for å sette opp prosjektet:
git klone https://github.com/grabcode/react-native-web-starter.git RNLayouts cd RNLayouts rm -rf .git npm installere
Når det er ferdig med å installere, navigerer du inne i app / komponenter katalogen. Det er her filene er at vi primært skal jobbe med.
Åpne App.js fil og erstatt standardkoden med følgende:
Import React, Component fra 'reagere'; // importer komponentene som vi skal lage her eksport klasse App utvider komponent render () return // bruk komponentene her);
Senere kan du importere komponentene som vi skal lage, og deretter gjengi dem fra denne filen. Bare husk at noen komponent som vi lagrer inne i oppsett katalogen bør ikke gjengis med noe annet. For eksempel, hvis vi har oppsett / StackLayout.js, gjør følgende i App.js:
Import React, Component fra 'reagere'; // importer komponentene som vi skal lage her importere StackLayout fra './layouts/StackLayout'; eksport klasse App utvider komponent render () return ();
Du kan betjene prosjektet ved å utføre følgende kommando:
npm kjøre dev
Dette lar deg få tilgang til det i nettleseren ved å besøke http: // localhost: 3000. En fullstendig sideopplasting vil bli utløst hvis du gjør en endring til noen av filene som for øyeblikket er importert fra App.js fil.
Layouts i React Native bruker en delmengde av Flexbox. (Jeg sier "delmengde" fordi ikke alle funksjonene som er i Flexbox-spesifikasjonen er inkludert.) Så hvis du allerede vet Flexbox, kan du enkelt anvende disse ferdighetene i React Native. Det er også verdt å merke seg at det ikke er noen flyter eller prosentbaserte enheter i React Native. Dette betyr at vi bare kan lage oppsett ved hjelp av Flexbox og CSS-posisjonering.
Den første typen layout som vi skal implementere er Stack Layout. For vertikal orientering stabler elementene oppå hverandre, mens for horisontal orientering er elementene plassert ved siden av hverandre. La oss ta en titt på vertikal orientering først:
Her er koden for å oppnå oppsettet ovenfor:
Accentsconagua
Import React, Component fra 'reagere'; importer StyleSheet, View, Dimensions fra 'react-native'; var height = Dimensions.get ('window'); var box_count = 3; var box_height = height / box_count; eksporter standardklasse VerticalStackLayout utvider komponent render () return ( ); height: box_height, box1: backgroundColor: '# 2196F3', boks2: backgroundColor: '# font: 1, flexDirection:' column ', 8BC34A ', boks3: backgroundColor:' # e3aa1a '); Ved å bryte ned koden ovenfor får vi først høyden på ledig plass for appen å konsumere. Deretter beregner vi hva høyden på hver boks vil være. Siden vi har tre bokser deler vi det med tre.
var height = Dimensions.get ('window'); var box_count = 3; var box_height = height / box_count;For merking bør boksene pakkes inn i en beholder. Vanlige stiler er deklarert i eske objekt, og unike bakgrunnsfarger brukes til unikt navngitte objekter (box1, BOX2, BOX3):
For å bruke Flexbox må du bruke flex eiendom på beholderen. Verdien er mengden plass det vil forbruke. Hvis det er 1, det betyr at det vil forbruke all ledig plass, forutsatt at elementet ikke har søsken. Vi tar en titt på et eksempel på bruk av flex med søsken senere.
flexDirection lar deg spesifisere primæraksen i oppsettet. Som standard er dette satt til kolonne. Innstilling flexDirection til kolonne betyr at beholderens barn vil bli lagt ut vertikalt (stablet ovenpå hverandre) mens du setter det på rad betyr at barna skal legges ut horisontalt (side om side). For å oppnå like høyde, still inn høyden på eske til det av verdien som vi beregnet tidligere.
const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', boks: height: box_height // sett dette, boks1: backgroundColor: '# 2196F3', boks2: backgroundColor : '# 8BC34A', boks3: backgroundColor: '# e3aa1a');
Her er et bilde som hjelper deg med å visualisere hvordan innholdet vil flyte basert på flexDirection som du oppgav.
Metoden jeg bare viste deg, er den manuelle måten å gjøre ting på. Bruker dimensjoner å beregne bredden eller høyden på elementene vil mislykkes hvis appen støtter både portrett og liggende enhetretning. Det er fordi så snart brukeren smiler på enheten, vil bredden eller høyden du har beregnet tidligere gå galt. React native vil ikke automatisk rekomputere det for deg, så appen ender opp med å se rart ut.
Flexbox kan faktisk gjøre beregningen for deg hvis du bare leverer de riktige verdiene. For å oppnå samme layout som ovenfor uten å bruke dimensjoner, alt du trenger å gjøre er å spesifisere flex: 1 for alle boksene i stedet for å angi høyde:
boks: flex: 1,
Dette er nå et eksempel på bruk flex med søsken. Nå har vi tre søsken med det samme flex verdi. Dette betyr at alle tre av dem deler like ledig plass siden flex verdien er den samme. (Du kan faktisk bruke noen flex verdien så lenge barnets elementer alle har samme verdi.)
Ved hjelp av denne kunnskapen kan du nå oppnå layouter med et overskrift, innhold og en bunntekst:
// header box1: flex: 1, backgroundColor: '# 2196F3', // innholdskasse2: flex: 10, backgroundColor: '# 8BC34A', // footer box3: flex: .5, backgroundColor: ' # e3aa1a '
Slik ser det ut:
Merk at dette vil være statisk. Så hvis hovedinnholdet ditt blir høyere enn den maksimale tilgjengelige høyden, vil resten av innholdet bli skjult. Hvis du forventer at innholdet ditt går over den grensen, kan du bruke det innebygde ScrollView komponent for å automatisk generere en vertikal rullebøyle akkurat som i nettsider.
For å implementere horisontale stakklayouter er alt du trenger å gjøre, å endre flexDirection til rad.
container: flex: 1, flexDirection: 'row',
Hvis vi bytter boksen flex verdien tilbake til 1, dette resulterer i følgende utgang:
Det eneste vi endret er flexDirection, som nå er satt til rad. Siden boksene er satt til flex: 1, de vil ha samme bredde og høyde. Alle ideene fra den vertikale stablingsoppsettet er like gjeldende for denne.
Hvis du vil kontrollere fordelingen av barn i en beholder, bruker du justifyContent eiendom på beholderen.
Nedenfor er de fem mulige verdiene som kan brukes med denne egenskapen. I de følgende eksemplene blir høyden til hver av barna redusert for å demonstrere hvordan hver skulle se ut. Du ville ikke kunne se noen forskjell hvis flex verdien var 1 for hver av barna, fordi de ville ende opp med å konsumere all ledig plass.
flex-start: Barnelementene er justert mot startpunktet. Legg merke til den hvite bakgrunnen rett under det siste barnet. Det er slik du vet at dette bruker flex-start fordi alle barna er rettet mot utgangspunktet. Dette etterlater en tom plass mot slutten.
flex-end: Barnelementene er justert mot sluttlinjen. Legg merke til at denne gangen er det tomme rommet på startpunktet.
senter: Barnelementer er plassert mot senteret. Denne gangen er det tomme mellomrom like fordelt mellom start- og sluttpunktet.
plass rundt: Barnelementer distribueres slik at det vil være lik plass rundt hver av dem. Dette betyr at elementene i ytre delen vil ha mindre plass på ytre side og mellomrom mellom de to barna blir doblet.
plass mellom-: Barnelementer distribueres slik at det vil være like mye plass mellom hver av dem. 
Som du kanskje har lagt merke til, er hver av disse stilegenskapene avhengig av høyden eller bredden av barnelementene. Det er avhengig av bredden hvis flexDirection er rad, og i høyden hvis flexDirection er kolonne.
For eksempel, plass mellom- vil egentlig ikke ha noen effekt på en vertikal stakk layout hvis hver av elementene bruker flex å kontrollere høyden. Dette skyldes at det ikke er mer plass igjen for gapet mellom hvert barnelement å konsumere.
Ved første øyekast, justifyContent og alignItems kan se ut som om de gjør det samme. De deler også tre mulige verdier: flex-start, flex-end, og senter, med tillegg av a tøye ut verdi.
Den største forskjellen mellom justifyContent og alignItems er aksen som barna fordeles på. Som du har sett tidligere, justifyContent bruker alltid primærakselen når du distribuerer barnelementer. Men alignItems bruker aksen motsatt den primære.
Vi vet allerede at aksen er bestemt av flexDirection som har blitt satt. Så hvis flexDirection er rad, primæraksen flyter fra venstre til høyre. Dette betyr at kryssaksen vil strømme fra topp til bunn. På den annen side, hvis flexDirection er kolonne så vil kryssaksen strømme fra venstre til høyre.
Nedenfor er noen eksempler på justifyContent og alignItems implementert side om side med flexDirection av rad. Den første bruker justifyContent mens den andre bruker alignItems.
flex-start: plasseringen av elementene er den samme, og derfor er alignItems implementeringen ser ut akkurat som justifyContent.
flex-end: nå begynner vi å se en forskjell. I første omgang er det på slutten av linjen i første rad, mens den andre forekomsten ser ut til å være på startlinjen til den siste raden. 
senter: senter har den samme ideen som resten av verdiene som vi har brukt hittil. I første omgang er elementene sentrert på x-aksen, mens i den andre er elementene sentrert på y-aksen.
tøye ut: bruk dette for å få barnelementene til å strekke for å fylle beholderen. Dette er standardverdien for alignItems, så spesifisering av denne verdien er valgfri. Du har allerede sett hvordan dette fungerer når vi implementerte vertikale og horisontale stablingsoppsett.Her er koden som brukes i eksemplene ovenfor. Bare spill med verdiene for flexDirection, justifyContent og alignItems hvis du vil se hvordan de ser ut:
Import React, Component fra 'reagere'; importer StyleSheet, View fra 'react-native'; eksporter standardklasse AlignItems utvider komponent render () return (); const styles = StyleSheet.create (wrapper: flex: 1, container: flex: .5, flexDirection: 'row', justifyContent: 'flex-start', // erstatt med flex-end eller center borderBottomWidth : 1, borderBottomColor: '# 000', container2: flex: .5, flexDirection: 'row', alignItems: 'flex-start' // erstatt med flex-end eller sentrum, boks: bredde: 100, høyde: 100, boks1: backgroundColor: '# 2196F3', boks2: backgroundColor: '# 8BC34A', boks3: backgroundColor: '# e3aa1a');
Hvis du vil spesifisere justeringen av individuelle elementer i en beholder, kan du bruke alignSelf eiendom. Alle mulige verdier for justere elementer gjelder også denne eiendommen. Så, for eksempel, kan du justere et enkelt element til høyre for beholderen, mens resten er justert til venstre.
React Native kommer egentlig ikke med et grid layout system, men Flexbox er fleksibelt nok til å skape en. Ved å bruke de tingene vi lærte så langt, kan vi gjenskape Grid-oppsett ved hjelp av Flexbox. Her er et eksempel:
Og her er koden som lager det oppsettet:
Import React, Component fra 'reagere'; importer StyleSheet, View fra 'react-native'; eksporter standard klasse GridLayout utvider komponent render () return (); const styles = StyleSheet.create (rad: flex: 1, flexDirection: 'row', justifyContent: 'mellomrom', marginBottom: 10, boks: flex: 1, høyde: 100, backgroundColor: ' # 333 ',, boks2: backgroundColor:' green ', boks3: backgroundColor:' orange ', to: flex: 2);
Fra koden ovenfor kan du se at vi emulerer hva de vanligvis gjør i CSS-gridrammer. Hver rad er pakket inn i en separat visning, og rutenettene er inne i den. En standard flex verdien av 1 brukes på hvert element, slik at de vil dele like plass som tilgjengelig på hver rad. Men for elementer som trenger å forbruke større plass, en høyere flex verdien er brukt. Dette justerer automatisk bredden på de andre elementene slik at den passer til alle elementene.
Hvis du vil legge til mellomrom mellom hvert element på rad, kan du legge til en utfylling til hver av dem og deretter lage en boks inne i hver enkelt.
Dette resulterer i følgende utgang:
Reag Native only supports absolutte og slektning posisjonering. Dette bør ikke begrense deg, fordi du alltid kan kombinere disse med Flexbox for å plassere de forskjellige elementene hvor du vil.
La oss se på hvordan vi ville oppnå følgende:
Vi kan oppnå dette enkelt hvis vi har full kommando over posisjoneringsverdiene som er tilgjengelige i nettleseren. Men siden vi er i React Native, må vi tenke på dette Flexbox-måten først og deretter bruke CSS-posisjonering for de små boksene.
Ved hjelp av Flexbox, kan dette oppnås på to måter. Du kan enten bruke rad eller kolonne for flexDirection for hovedbeholderen. Hvordan du arrangerer de forskjellige elementene vil avhenge av hvilken metode du velger. Her skal vi bruke rad for flexDirection så skjermen vil bli delt inn i tre kolonner. Den første kolonnen inneholder den oransje boksen, den andre kolonnen inneholder de svarte, grå og grønne boksene, og den tredje vil inneholde de blå og små lilla boksene.
Import React, Component fra 'reagere'; importer StyleSheet, View fra 'react-native'; eksporter standard klasse Plassering utvider komponent render () return ();
Hvis du allerede vet hvordan hvert element skal legges ut, er det bare et spørsmål om å bruke de tingene vi har lært så langt. Tross alt trenger vi ikke å bruke CSS-posisjonering på de store boksene, bare de små.
Den første kolonnen har bare oransje boksen, så det gjelder justifyContent: 'center' til beholderen bør gjøre trikset. I tilfelle du allerede har glemt, flexDirection standard til kolonne. Dette betyr at hvis du setter inn justifyContent til senter, barna vil bli justert på midten av Y-aksen.
Den andre kolonnen har i utgangspunktet den samme ideen som den første, bare denne gangen ønsker vi ikke å justere alle boksene til senteret. Det vi ønsker er at de skal ha like mellomrom mellom hverandre, og justifyContent: 'mellomrom mellom' får den jobben gjort. Men samtidig vil vi også sitte alle barna på X-aksen slik vi bruker alignItems: 'center'.
Den eneste vanskelige delen her er at du ikke bør bruke noen bredde eiendom til den grå boksen fordi vi vil at den skal strekke hele veien for å konsumere hele bredden av foreldrene. Siden vi ikke brukte noen bredde, vi burde søke alignSelf: 'stretch' til den grå boksen slik at den vil konsumere full bredde av foreldrene.
Deretter bruker vi den lille røde boksen litt bort fra den relative posisjonen stilling: relativ og bruk deretter topp og venstre verdier fordi den relative posisjonen er rundt øverste venstre hjørne av sin overordnede.
Når det gjelder den lille oransje boksen, bruker vi posisjon: "absolutt" fordi vi må justere den til øverste høyre hjørne av sin overordnede. Dette fungerer fordi absolutt posisjonerte elementer i React Native er bundet til foreldrene sine.
Den tredje kolonnen gjelder i utgangspunktet den samme ideen, så jeg kommer ikke lenger til å forklare det.
const styles = StyleSheet.create (container: flex: 1, flexDirection: 'row', venstre: flex: 1, justifyContent: 'center', midt: flex: 5, justifyContent: 'space-between' , alignItems: 'center', høyre: flex: 1, justifyContent: 'center', alignItems: 'flex-end', boks: bredde: 100, høyde: 100, backgroundColor: '# 333', big_green_box : backgroundColor: 'green', big_orange_box: backgroundColor: 'oransje', big_lightblue_box: backgroundColor: '# 03A9F4', big_gray_box: høyde: 100, alignSelf: 'stretch', backgroundColor: '#ccc' , inner_box: bredde: 20, høyde: 20,, red_box: posisjon: 'relativ', bakgrunnKolor: 'rød', topp: 10, venstre: 10, orange_box: posisjon: 'absolutt', bakgrunnKolor: ' oransje ', topp: 10, høyre: 10, purple_box: posisjon:' absolutt ', backgroundColor:' purple ', bunn: 10, høyre: 10, black_box: posisjon:' relative ', backgroundColor:' black ' );
Deretter skal vi prøve å implementere en fast topptekst og bunntekstlayout. Dette finnes vanligvis i apper som har en flippnavigasjon; Flikene er festet nederst på skjermen mens hovedinnholdet kan rulles.
For oss å oppnå dette, må vi bruke ScrollView komponent slik at hvis hovedinnholdet går over beholderens høyde, vil React Native automatisk generere en vertikal rullestang. Dette tillater oss å legge til marginTop og marginBottom til hovedinnholdsbeholderen slik at den faste overskriften og bunnteksten ikke vil hindre hovedinnholdet. Vær også oppmerksom på at venstre og Ikke sant verdiene for topptekst og bunntekst er satt til 0 slik at de vil forbruke hele enhetens bredde.
Import React, Component fra 'reagere'; importer StyleSheet, View, ScrollView fra 'react-native'; eksporter standardklasse FixedHeaderFooter utvider komponent render () return (); const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', justifyContent: 'center', overskrift: høyde: 40, posisjon: 'absolutt', venstre: 0, høyre: 0 , topp: 0, backgroundColor: '# 03A9F4', zIndex: 10, innhold: alignItems: 'center', marginTop: 50, marginBottom: 40, footer: høyde: 40, posisjon: 'absolutt' 0, høyre: 0, bunn: 0, backgroundColor: '# 8BC34A', boks: bredde: 100, høyde: 100, backgroundColor: '# 333', marginBottom: 10);
Slik ser det ut:
React Native har et stort samfunn bak seg, så det er ikke rart at noen få biblioteker allerede er opprettet for å lette implementeringen av layouter. I denne delen vil jeg introdusere deg til et bibliotek kalt React Native Easy Grid. Du kan bruke den til å beskrive hvordan du vil legge ut appen din ved å benytte deg av Nett, Rad, og Col komponenter.
Du kan installere den med følgende kommando:
npm installere reager-innfødt-lett-grid - lagre
Importer biblioteket og trekk ut de forskjellige komponentene i filen din.
Import React, Component fra 'reagere'; importer StyleSheet, View fra 'react-native'; importer Col, Row, Grid fra "reagere-native-easy-grid";
De Nett komponent brukes til å pakke inn alt. Col brukes til å lage en kolonne, og Rad brukes til å lage rader. Du kan spesifisere en størrelse eiendom for begge Rad og Col, selv om vi bare brukte den på Rad under. Hvis størrelsen ikke er spesifisert, deler den like ledig plass mellom Col forekomster.
I dette tilfellet er det bare to, så hele skjermen er delt inn i to kolonner. Den første kolonnen er da delt inn i to rader. Her spesifiserte vi en størrelse, men du kan faktisk hoppe over det hvis du bare trenger like store rader, som vi gjorde under.
eksporter standard klasse FlexboxGridLibrary utvider komponent render () return (); |
|
Når det er gjort, er alt du trenger å gjøre, å legge til stylingen for radene og kolonnene:
const styles = StyleSheet.create (orange_box: backgroundColor: 'orange', green_box: backgroundColor: 'green', gray_box: backgroundColor: 'gray');
Som du har lagt merke til, har React Native Easy Grid en veldig intuitiv API.
I denne opplæringen lærte du hvordan du legger ut React native apps. Spesielt lærte du hvordan du bruker React Native's Flexbox til å plassere ting rundt. Du lærte også hvordan du bruker React Native Easy Grid, noe som gjør Flexbox implementering enklere.
.
