Accentsconagua
Share
I denne serien lærer du hvordan du bruker React Native til å lage sidelayouter som ofte brukes i mobilapper. Oppsettene du lager, vil ikke være funksjonelle - i stedet er hovedfokuset i denne serien å få hendene skitne ved å legge ut innhold i dine React native apps.
Hvis du er ny for å legge ut React native apps eller styling generelt, sjekk ut min tidligere opplæring:
For å følge med denne serien utfordrer jeg deg til å prøve å gjenskape hver skjerm først først, før du leser mine trinnvise instruksjoner i opplæringen. Du vil ikke ha stor nytte av denne opplæringen bare ved å lese den! Prøv først før du ser opp svarene her. Hvis du lykkes med å gjøre det som den opprinnelige skjermen, sammenligner du implementeringen din til min. Deretter bestem deg selv hvilken som er bedre!
I dette tredje innlegget i serien, vil du opprette følgende fotogalleri-side:
Gallerier brukes ofte til å vise en samling av beslektet innhold på en slik måte at kun nødvendig informasjon presenteres. Mesteparten av tiden inkluderer dette et bilde, en tittel og annen relevant informasjon.
Her er et par eksempler på at denne typen layout blir brukt i naturen:
Det første trinnet er selvfølgelig å sette opp et nytt React Native-prosjekt:
Reager-native init reager-native-common-skjermer
Når prosjektet er satt opp, åpner du index.android.js fil og erstatt standardkoden med følgende:
Import React, Component fra 'reagere'; importer AppRegistry fra 'react-native'; importer galleri fra './src/pages/Gallery'; eksporter standardklasse ReactNativeCommonScreens utvider komponent render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Lage en src / sider mappe og opprett en Gallery.js filen i den.
Du trenger også reagere fremmed-vektor-ikoner pakke. Dette brukes spesielt til ikonene i bunnteksten.
npm installere - lagre reaksjons-native-vektor-ikoner
Åpne android / app / build.gradle fil og legg til en referanse til pakken:
avhengigheter // resten av avhengighetene er her på toppen kompilere prosjektet (': reagere-native-vector-ikoner') // legge til detteGjør det samme med android / settings.gradle fil ved å legge til følgende nederst:
include ': reager-native-vector-icons' prosjektet (': react-native-vector-icons'). projectDir = ny fil (rootProject.projectDir, '... / node_modules / react-native-vector-icons / android')Åpen android / app / src / hoved / Java / COM / reagerer-nativ-felles-skjermer / MainApplication.java og importer pakken:
importer java.util.Arrays; importer java.util.List; importer com.oblador.vectoricons.VectorIconsPackage; //Legg til dette
Til slutt, initialiser pakken:
@Override beskyttet listegetPackages () return Arrays. asList (ny MainReactPackage (), ny VectorIconsPackage () // legg til dette);
Ok, nå som du har forsøkt å kodes selve oppsettet (ikke fusk, ikke sant?), Vil jeg vise deg hvordan jeg bygget implementeringen min.
I motsetning til de to foregående sidene trenger gallerisiden noen bilder som skal fungere som hovedinnhold. Du kan gå til Google og søke etter bilder eller laste ned bildene fra GitHub repo. Alle bildene jeg brukte er merket for gjenbruk av deres respektive eiere, så du kan fritt bruke dem hvis du vil. Når du har bildene, lagre dem inne i src / bilder katalogen. På grunn av måten bildene skal legges ut, skal alle ha lik dimensjoner.
Begynn med å lage filen (src / sider / Gallery.js) og legg til boilerplate-koden:
Import React, Component fra 'reagere'; importer StyleSheet, View, ScrollView, Image, fra 'react-native'; importer ikonet fra 'reagere-native-vector-icons / fontAwesome'; Importer knapp fra '... / components / Button'; eksporter standard klasse Galleri utvider komponent ...
Denne siden trenger en konstruktør () funksjon hvor du definerer stiene til bildene du vil bruke. I React Native, måten du refererer til bilder som er inne i arbeidskatalogen din, er ved å kreve dem akkurat som du ville ha en JavaScript-modul. Det er også viktig å merke seg at du ikke kan ha dynamisk genererte bildestier, slik at du må levere den faktiske banen for hånden.
konstruktør (rekvisitter) super (rekvisitter); this.state = photos: [label: 'beach', src: krever ('... /images/beach.jpg'), label: 'bridge', src: require ('... /images/bridge.jpg '), label:' fields ', src: krever (' ... /images/fields.jpg '), label:' mountains ' label: 'solsikke', src: krever ('... /images/sunflower.jpg'), label: 'sunset', src: krever ('... /images/sunset.jpg'), label: ' , 'src' : krever ('... /images/pink.jpg'), label: 'skinner', src: krever ('... /images/rails.jpg'),]; Du trenger ikke å definere disse i staten, da verdiene ikke vil endre seg. Du kan faktisk definere disse i en egen fil, importere den, tilordne den til en variabel, og deretter bruke den direkte. Men for enkelhets skyld besluttet jeg å bare sette alt i staten.
Inne i render () Metode, du kommer til å bryte trenden med å pakke alt inn i en ScrollView komponent, fordi fanekomponenten på den nederste delen av skjermen skal ha en fast posisjon. Dette betyr at selv om bildene går over den tilgjengelige høyden, skal fanene fortsatt være på plass. For å oppnå dette, bruk a Utsikt komponent for å pakke inn alt og bare pakke inn samlingen av bilder i en ScrollView. Dette tillater deg å bruke bare rulle til beholderen i samlingen av bilder:
gjengivelse () retur (this.renderGallery () );
Nå kan du begynne å se et mønster her. Hver gang du trenger å bruke JavaScript-kode inne i render () funksjon, bør du opprette en egen funksjon for å holde den koden, i stedet for å sette den direkte inn i render () funksjon. Dette holder det lunt og rent.
La oss nå gå videre til stylingen. Selv om a ScrollView er ikke vant til å pakke alt denne gangen, det er viktig å merke seg at du fortsatt må levere flex: 1 til hovedbeholderen slik at den forbruker hele ledig plass.
container: flex: 1, flexDirection: 'kolonne', galleri: flexDirection: 'kolonne', faner: flexDirection: 'row', backgroundColor:' # 333 ', polstring: 20 1, ikon: textAlign: 'center',
De renderGallery () funksjonen er veldig lik den renderWeeks () funksjon som vi brukte i den forrige opplæringen, som vi pleide å gjengi en kalenderside. Hvis du vil ha en oppdatering på hvordan det fungerer, kan du lese og lese den forrige veiledningen på kalenderen. Det du trenger å vite er det resizeMode brukes til Bilde. I dette tilfellet er det satt til dekke, som gjør bildet okkupert hele ledig plass i beholderen, samtidig som bildet opprettholdes. Dette resulterer i at bildet blir litt oppblåst for enheter med større skjermer hvis det opprinnelige bildet er mindre.
renderGallery () var count = 0; var previous_item = "; var par = this.getPairsArray (this.state.photos); returner par.map ((item, index) => return (); );
Her er getPairsArray () funksjon:
getPairsArray (bilder) var pairs_r = []; var par = []; var teller = 0; photos.forEach ((item) => count + = 1; pairs.push (element); hvis (telle == 2) pairs_r.push (pairs) count = 0; pairs = [];); returnerer par_r;
Endelig er her stylingen for hver rad (punkt) og bilde (bilde). Legg merke til bruken av flex: 1 på selve bildet. Dette er gjort fordi Bilde komponenten i seg selv er sin egen beholder. Du vil at beholderen selv skal okkupere halvparten av ledig plass for hver rad - det er derfor a flex eiendom skal tildeles Hvis dette ikke er gjort, vil bare dimensjonene som kreves av bildet bli brukt, og resizeMode som du la til tidligere, vil ikke engang ha en effekt.
element: flex: 1, flexDirection: 'row',, foto: flex: 1
Det er det! I denne opplæringen lærte du hvordan du implementerer oppsettet for en galleriside. Vi fokuserte på hvordan vi skal håndtere bilder når det gjelder å legge ut dine React native apps. Ofte må du bruke en kombinasjon av flex og resizeMode for å gjøre bilder flyt slik du vil at de skal. Hvordan sammenlignet min løsning med din egen? Gi oss beskjed i diskusjonsforumet nedenfor.
I en kommende opplæring lærer du hvordan du implementerer layouten som ofte brukes i nyhetsprogrammer. I mellomtiden kan du se noen av våre andre opplæringsprogrammer på React Native og Flexbox!
