React Native Tutorial – Byg din første iOS-app med JavaScript (del 1)

Om forfatteren

Nash Vail har en passion for at designe og bygge brugergrænseflader. Han studerer i øjeblikket datalogi og er aktivt på udkig efter praktikpladser. …Mere omNash↬

• 22 min læsning
• Mobil,JavaScript,Apps,iOS,React,Swift
• Sparet til offline læsning
• Del på Twitter, LinkedIn

Tanken om at bygge mobile apps med JavaScript er ikke ny. Vi har set frameworks som Ionic og PhoneGap tage udfordringen op, og det er til en vis grad lykkedes dem at få en rimelig stor opbakning fra udviklere og fællesskabet. Til del 2 af tutorialen.

Disse frameworks og hele idéen om at bygge mobilapps med JavaScript har dog aldrig tiltalet mig. Jeg har altid tænkt, hvorfor ikke bare lære Swift/Objective-C eller Java og bygge rigtige apps? Det kræver helt klart en betydelig mængde læring, men er det ikke det, vi udviklere gør og bør være gode til? Hurtigt at lære nye sprog og frameworks? Hvad er pointen så? For mig opvejede fordelene aldrig tvivlen.

Indtil jeg læste denne artikel fra Chalk + Chisel, især følgende linje:

Fast-forward et par måneder, og jeg er selvsikker nok til at sige, at jeg måske aldrig vil skrive en iOS-app i Objective-C eller Swift igen.

Hvad? Er du ligesom… seriøs?

Yderligere læsning på SmashingMag:

• Why You Should Consider React Native For Your Mobile App
• Server-Side Rendering With React, Node And Express
• How To Scale React Applications
• Internationalizing React Apps

Læsning af en så dristig påstand fik mig til at gå videre og give React Native et skud. Hvorfor ikke? Jeg brugte allerede React og var vild med det. React Native er så lig React (duh!), at du vil føle dig hjemme, hvis du allerede er React-udvikler. Selv hvis du ikke er det, er React heldigvis meget let at få styr på.

Hvad vi vil bygge

Jeg har aldrig haft held med at finde den perfekte tapet-app til min iPhone i App Store. På computeren er Unsplash en one-stop-shop for alle mine tapetbehov. På telefonen: I modsætning til nogle andre tutorials, hvor du bygger tællere og knap nok bruger dem, vil vi i denne tutorial sammen bygge os en app, der trækker tilfældige fantastiske baggrunde fra Unsplash, viser dem på en æstetisk tiltalende måde og giver dig mulighed for at gemme wallpapers efter eget valg i kamerarullen. Tro mig, jeg har fundet mig selv ved at bruge denne app mere, end jeg oprindeligt troede. Selv hvis React Native ved slutningen af denne vejledning ikke imponerer dig, vil du stadig ende med at få en rigtig fed tapet-app. Er det ikke fantastisk?

Hvor vi går i gang, er her nogle ting, du bør være bekendt med:

1. JavaScript
2. Nogle ES2015-funktioner, nemlig Classes, Arrow Functions, Destructuring og Template Strings
3. Mac OS X Terminal
4. CSS (yup!)
5. React (valgfrit)

Endnu en ting mere. Som det tydeligt fremgår af titlen, skal vi i denne tutorial bygge en iOS-app. Hvilket kræver, ja, selv med React Native, at du er på en Mac. Med React Native kan du helt sikkert bygge Android-apps på Windows og Linux, men ikke iOS-apps. Derfor forudsætter denne tutorial herfra og fremover, at du kører Mac OS X.

Takeaways

I slutningen af denne tutorial vil du være fortrolig nok med React Native til at begynde at skrive dine egne apps med det samme. Vi gennemgår opsætning af et projekt i Xcode, installation af tredjepartsmoduler og komponenter, linking af biblioteker, styling med flexbox, oprettelse af en brugerdefineret gesture listener og mange andre ting.

Hvis du ikke har brugt React før, vil denne vejledning også sætte dig op med React. React er det nye hotte JS-bibliotek med et stort potentiale, og jeg kan ikke se, at det går nogen steder hen i den nærmeste fremtid.

Denne tutorial er opdelt i to dele for din bekvemmelighed. Hver del har fem afsnit. I hvert afsnit opnår vi et mål, der bringer os et skridt tættere på at færdiggøre vores app. Jeg vil råde dig til, at når du først er begyndt, bør du afslutte hele afsnittet på én gang, da de er korte, og på den måde vil du lære hele konceptet at kende, som jeg forsøger at introducere uden at bryde dit flow.

Til din reference kan den endelige kode til den app, vi bygger, findes i denne GitHub-repo.

Sæt et tomt React Native-projekt op

Sørg for, at du har Xcode 7.0 eller højere installeret. det kan downloades gratis fra App Store.

Sandsynligvis (hvis du er webudvikler og læser dette i 2016) har du allerede Node installeret. Men hvis det ikke er tilfældet, så gå i gang med at installere Node også. Et andet vigtigt værktøj, som vi får brug for, er npm. Node leveres med npm installeret; du bliver dog nødt til at opdatere det, da det bliver opdateret ret ofte. Følg denne installationsvejledning.

Det er alt, hvad vi skal bruge. Fra terminalen skal du nu køre npm install -g react-native-cli. Dette vil installere React Native globalt på dit system.

Hvis alting virker alt for nyt for dig, eller hvis du bare føler dig lidt fortabt i hele installationsprocessen, er den officielle Getting started-guide altid klar til at hjælpe dig.

Find et godt sted på din computer, hvor du gerne vil opsætte projektet. Når du er der, skal du fra terminalen køre react-native init SplashWalls.

Dette skulle hente og installere alle de nødvendige moduler og oprette en ny mappe kaldet SplashWalls.

En god ting ved React Native er, at du kan skrive både Android- og iOS-applikationer sammen med størstedelen af JavaScript-koden delt mellem dem. Inde i den nyoprettede mappe finder du to .js-filer: index.android.js og index.ios.js – navnene er selvforklarende. Hvis du bygger en iOS-app, arbejder du med index.ios.js; med index.android.js for en Android-app; og begge for, du ved, begge platforme.

Da vi bygger en iOS-app, vil vi af hensyn til denne vejledning og for at holde tingene rene slippe af med index.android.js og android-mappen helt og holdent. index.ios.js er den fil, vi skal arbejde med. Det er den fil, der først udføres, når appen lanceres.

Næst skal du gå over til ios-mappen og starte SplashWalls.xcodeproj.

Du bør se et Xcode-vindue poppe op som vist nedenfor.

Bemærk advarslen i billedet ovenfor, hvor der står “No matching provisioning profiles found”. Lad os rette dette.

Først skal du ændre teksten i feltet Bundle Identifier til noget brugerdefineret. Du skal sikre dig, at det, du indtaster, følger den omvendte DNS-konvention, hvor din organisations domænenavn omvendes og efterfølges af yderligere identifikatorer. Denne konvention er med til at skelne dit program fra andre programmer på en enhed og i App Store. Jeg vil bruge com.nashvail.me.tutorial.SplashWalls; erstat blot dit navn i stedet for mit, hvis du ikke kan finde på noget.

Næst skal du vælge dit navn i rullelisten for hold.

Klik på Fix Issue.

Mens vi er i gang, skal du lægge mærke til afsnittet Deployment Info (oplysninger om implementering). Der er anvendt nogle standardindstillinger.

Ændrer indstillingerne, så de passer til følgende:

Vi vil gøre appen portræt-kun og også skjule statuslinjen.

Gå i gang og tryk på knappen Kør øverst til venstre i Xcode. Når du gør det, starter du et terminalvindue som det, der er vist nedenfor. Den indledende transformation tager lidt tid.

Når det er gjort, bør du se følgende output i simulatoren:

Og hermed har vi afsluttet vores allerførste afsnit.

Hentning af tapetdata fra API’et

I dette afsnit foretager vi kald til Unsplash.it API’et og beder om tapetdata. Men før vi begynder at gøre alt det interessante arbejde, er der noget opsætning, der skal gøres.

Skift til ES2015-klassesyntaks

Når du åbner filen index.ios.js, vil du bemærke, at der allerede er noget indledende kode til stede. Dette er den kode, der er ansvarlig for output i simulatoren (forrige billede).

Indenfor index.ios.js bemærk kodelinjen, hvor der står var SplashWalls = React.createClass({ … }). Vi skal ændre denne. Vi vil bruge ES2015’s class-syntaks til denne tutorial.

Vi udviklere er nysgerrige sjæle. Jeg ved, at du sikkert spørger: Hvorfor? Hvorfor skifte til class-syntaksen?

Det kommer alt sammen an på personlige præferencer. Jeg har tidligere programmeret meget i objektorienterede sprog, og class føles bare mere velkendt for mig. Desuden vælger du ved at bruge class også at holde koden lidt renere, da du ikke behøver at tilføje kommaer efter hver metodeklaration.

På den anden side får du, når du vælger class, ikke funktioner som autobinding eller adgang til isMounted-metoden, hvilket slet ikke er nogen dårlig ting, da du ikke rigtig kommer til at opleve, at du er på bar bund ved ikke at bruge disse.

Hvilken vej du end vælger, opretter du trods alt en klasse. Mit råd ville være at bruge class. Det er en ny funktion, og før eller senere vil du finde dig selv i at bruge ES2015. Og hvis du følger denne tutorial, bliver du nødt til at bruge class – du har ikke rigtig noget valg!

For mere om dette kan du overveje at læse “React.Component vs React.createClass” af Naman Goel og Zach Silveira.

Når du har foretaget de nødvendige ændringer, bør kodeblokken nu se ud som vist:

class SplashWalls extends Component{ render() { return ( . <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> .</View> ); }};

For folk, der er nye i React, kan koden inden for return-parenteserne virke lidt skør, men det er ikke raketvidenskab, bare god gammel XML-lignende syntaks kaldet JSX. Læs mere om det her.

Sammenlignet med implementeringen før class er var-syntaksen væk. Også render: function(){… er nu bare render(){….

Hej! Men hvad er det for en Component, du udvider? Og du ville have ret til at spørge. Hvis du kørte projektet i Xcode nu, ville du få en fejl, der siger, at Component ikke er defineret. Du kan gøre to ting her: erstatte Component med React.Component; eller tilføje en ny linje inden for blokken (vist nedenfor) øverst i filen.

I dette og senere kodeeksempler omgiver jeg de nyligt tilføjede linjer med //, så det er lettere for dig at sammenligne den kode, du skriver, med det, der er vist her. Du skal blot sørge for, at du ikke kommer til at kopiere // sammen med den faktiske kode, hvis du kopierer kode fra eksemplerne. Da JSX ikke understøtter /***/-kommentarer, vil du ende med at få appen til at gå ned, hvis du medtager disse i din JSX-kode.

var { AppRegistry, StyleSheet, Tex .t, View, /***/ Component /***/} = React;

Den ovenstående kodeblok sparer dig blot for et par tastetryk. Hvis du f.eks. ikke inkluderede disse kodelinjer øverst, skulle du skrive React.AppRegistry i stedet for blot AppRegistry, hver gang du ville gøre det. Ret fedt! Er det ikke? OK, ikke så meget.

Gå tilbage til Xcode og kør projektet en gang til for at sikre dig, at du ikke har ødelagt noget i processen.

Er alting godt? Fint! Lad os gå videre.

Inden for SplashWalls-klassen er det første, vi skal gøre, at tilføje en konstruktør. Inde i konstruktøren vil vi initialisere vores tilstandsvariabler. De eneste to tilstandsvariabler, vi har brug for på dette tidspunkt, er et array – wallsJSON – som kommer til at gemme alle de JSON-data, der hentes fra API’et, og isLoading, som er en boolsk variabel, hvilket betyder, at den vil indeholde en værdi på enten sand eller falsk. At have denne tilstandsvariabel vil hjælpe os med at vise og skjule indlæsningsskærmen afhængigt af, om dataene er blevet indlæst eller ej.

Inden for SplashWalls-klassen skal du tilføje constructor som vist nedenfor.

class SplashWalls extends Component{/***/ constructor(props) { super(props); this.state = { wallsJSON: , isLoading: true }; }/***/...}

Næst skal vi definere en fetchWallsJSON-metode, som, ja, gør, hvad den siger. Lad et par linjer stå under konstruktørens lukkende parentes og tilføj følgende kodelinjer:

fetchWallsJSON() { console.log('Wallpapers will be fetched');}

Vi vil gerne have, at denne funktion affyres, når vores komponent er blevet monteret med succes. Tilføj metoden componentDidMount. De fleste af de beskrevne metoder går inden for SplashWalls-klassen – jeg vil ikke glemme at nævne, når de ikke gør det.

componentDidMount er en livscyklusmetode, som affyres umiddelbart efter den første rendering.

Her er en god forklaring på alle React-komponentens livscyklusmetoder. Husk blot, at da vi bruger den nyere class-syntaks, kan vi udelade getInitialState-metoden. Den erstattes af en this.state variabeldeklaration i constructor.

Det er en god idé at organisere metoderne inde i din klasse på en ren måde. Jeg kan godt lide at holde alle de brugerdefinerede metoder adskilt fra livscyklusmetoderne. Det bør du også gøre.

Lad os deklarere componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Bemærk, at vi inde i fetchWallsJSON-metoden har logget en meddelelse til konsollen – men hvor er konsollen? Hold fast.

Sørg for, at du har Simulator-vinduet valgt, og tryk på Cmd + Control + Z. Vælg Debug in Chrome i den menu, der dukker op, og vælg Debug in Chrome. Dette åbner en ny fane. Mens du er i den samme fane, skal du gå over til Dev Tools (Option + Cmd + J). I konsollen finder du meddelelsen “Wallpapers will be fetched”.

Hold debuggeren åben indtil videre. Besøg unsplash.it/list i en ny fane. Du bør se hele visningsvinduet fyldt med et JSON-array. Hvert element i arrayet er et JavaScript-objekt, der indeholder data for et enkelt tapet. Det er disse data, som vi vil filtrere igennem og hente tilfældige wallpapers fra.

Lad os først få fetchWallsJSON til at gøre mere end blot at logge en besked til konsollen.

 fetchWallsJSON() { /***/ var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { console.log(jsonData); }) .catch( error => console.log('Fetch error ' + error) ); /***/ }

Fradrys simulatoren (Cmd + R) eller, endnu bedre, aktiver live reload ved at trykke på Cmd + Ctrl + Z og vælge Enable live reload (aktiver live reload). Ved at aktivere live reload behøver du ikke at opdatere simulatoren, hver gang du foretager en ændring i din kode. Du skal blot gemme i IDE’en, og simulatoren opdateres automatisk. Hvis du nogensinde har udviklet en app i Xcode eller Android Studio før, vil du synes, at denne funktion er særlig fantastisk, da du ikke behøver at trykke på knappen Kør og kompilere appen igen, hver gang du foretager en ændring. Disse små bits gør React Native så meget mere tiltalende.

Når du opdaterer, bør du efter at have ventet et par sekunder se følgende output i konsollen:

Godt, nu er vi i stand til at hente wallpapers’ JSON-data fra API’et. Som du måske har bemærket, er der en lille forsinkelse, før dataene logges til konsollen. Det skyldes, at dataene i baggrunden bliver hentet fra serverne, hvilket tager tid.

Det ser ud til at være et perfekt tidspunkt at tilføje en loading-skærm.

Indførelse af en loading-skærm

I slutningen af dette afsnit får vi vist en loading-skærm, mens JSON-dataene hentes.

Først skal du fjerne alt inde i SplashWall-klassens render-metode og tilføje disse kodelinjer:

 render() { var {isLoading} = this.state; if(isLoading) return this.renderLoadingMessage(); else return this.renderResults(); }

Vi har to nye metoder. Lad os også deklarere dem, mens vi er i gang

 renderLoadingMessage() { return ( . <View style={styles.loadingContainer}> <ActivityIndicatorIOS animating={true} color={'#fff'} size={'small'} style={{margin: 15}} /> <Text style={{color: '#fff'}}>Contacting Unsplash</Text> .</View> ); } renderResults() { return ( . <View> <Text> Data loaded </Text> .</View> ); }

Afhængigt af, hvilken værdi isLoading-tilstandsvariablen indeholder, vil der blive gengivet to forskellige View-komponenter. Hvis isLoading er sand, viser vi en indlæsningsspinner efterfulgt af teksten “Contacting Unsplash”; når isLoading er falsk (hvilket indebærer, at data er blevet indlæst), viser vi resultaterne, som fra nu af blot er en Text-komponent, hvor der står “Data indlæst”.

Men vi mangler noget her: Vi ændrer ikke værdien af isLoading, når vores data er blevet hentet. Lad os gøre netop det. Gå over til fetchWallsJSON-metoden, og under den linje, der logger jsonData til konsollen, skal du tilføje en ekstra linje for at opdatere isLoading.

 fetchWallsJSON() { var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { console.log(jsonData); /***/ this.setState({isLoading: false}); //update isLoading /***/ }) .catch( error => console.log('Fetch error ' + error) ); }

setState er en af React’s Component API-metoder. Det er den primære metode, der bruges til at udløse opdateringer af brugergrænsefladen.

Bemærk, i renderLoadingMessage har vi en ny komponent: ActivityIndicatorIOS (sagt på en enkel måde, spinneren). Vi er nødt til at importere denne komponent, før vi kan bruge den. Kan du huske, da vi importerede Component, hvor vi sparede et par tastetryk? Det skal vi også gøre.

var { AppRegistry, StyleSheet, Tex .t, View, Component,/***/ ActivityIndicatorIOS // Add new component/***/} = React;

Vi skal gøre en ting mere, før vi kan se resultaterne. Læg mærke til, at View, der indeholder ActivityIndicatorIOS, har stilen sat til styles.loadingContainer. Det er vi nødt til at definere. Find den linje, hvor der står var styles = StyleSheet.create({…. Her vil du se, at der allerede er nogle stilarter defineret. Disse stilarter er ansvarlige for styling af den indledende “Velkommen til React Native”-meddelelse i simulatoren. Fjern alle de foruddefinerede stilarter og tilføj kun én for loadingContainer som vist.

var styles = StyleSheet.create({/***/ loadingContainer: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }/***/});

Alle de stilarter, du anvender på komponenter i React Native, er deklareret på den måde, der er vist ovenfor. StyleSheet.create tager et JavaScript-objekt, der indeholder stilarter, ind som et argument, og derefter kan stilarterne tilgås ved hjælp af operatoren dot. Ligesom vi anvendte stilen på wrapper View på følgende måde:

<View style={styles.loadingContainer}/>

Du har også lov til at deklarere stilarter inline:

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }} />

Det gør dog vores kode lidt uoverskuelig. Når du har flere stilarter anvendt på en komponent, er det altid en god idé at gemme dem i en variabel.

Stilarterne ligner meget CSS, ikke sandt? Ved du hvorfor? Fordi det er meningen, at de skal – de er ikke anderledes. Det gør React Native endnu nemmere for webudviklere at få fat i. Når du bygger en app i en dedikeret IDE (f.eks. Xcode), får du et StoryBoard til direkte at trække og placere UI-elementer som knapper og etiketter på skærmen. Det kan du ikke gøre i React Native, hvilket – tro mig – slet ikke er en dårlig ting.

React Native gør stor brug af flexbox til at placere elementer på skærmen. Når du først er fortrolig med flexbox, er det en leg at placere elementer rundt omkring. Jeg vil på enhver dag foretrække flexbox-layout frem for StoryBoard, punktum. Det er bare en af de ting, man selv skal prøve for at se forskellen.

Spar ændringerne, gå over til simulatoren, og tryk Cmd + R. Du bør se indlæsningsskærmen.

Efter et par sekunder bør du se skærmen, hvor der står “Data indlæst”.

Filtrering og udvælgelse af tilfældige tapeter

I dette afsnit vil vi filtrere tapetdataene og udvælge specificeret antal tilfældige tapeter.

Dette afsnit vil fokusere mere på JavaScript end React Native. Vi vil gennemgå oprettelsen af et nyt modul (fil), der skal håndtere generering af tilfældige tal. Hvis moduler i JavaScript lyder nye for dig, kan du overveje at gennemgå Node.js-moduler-dokumentationen.

Gå til linjen over class-deklarationen og erklære en ny konstant, der fortæller appen antallet af tilfældige wallpapers, der skal vælges; lad os gøre det til fem.

const NUM_WALLPAPERS = 5;

Nu skal vi oprette et modul, der hjælper os med genereringen af tilfældige tal. Dette modul vil eksportere to funktioner. Lad os se et kig på hver af dem.

• uniqueRandomNumbers: Denne funktion tager imod tre argumenter. Det første er antallet af tilfældige tal, der skal returneres. De næste to argumenter definerer det område, inden for hvilket de tilfældige tal skal returneres, nemlig lowerLimit og upperLimit. Hvis du kalder funktionen uniqueRandomNumbers(5, 10, 20), vil du få et array med fem unikke tilfældige tal mellem 10 og 20 tilbage.
• randomNumberInRange: Denne funktion modtager to argumenter, der definerer henholdsvis den nedre og den øvre grænse, mellem hvilke et enkelt tilfældigt tal returneres. Hvis du f.eks. kalder randomNumberInRange(2, 10), returneres et unikt tilfældigt tal mellem 2 og 10.

Vi kunne have slået begge disse funktioner sammen til én, men da jeg er en prædikant for god kvalitetskode, følger jeg princippet om enkeltansvar. SRP siger mere eller mindre, at hver funktion skal gøre én ting godt og ikke gøre noget andet. Hvis man følger gode programmeringsprincipper, sparer man sig for en række fremtidige hovedpiner.

Opret en ny fil i samme mappe som index.ios.js. Hvis vi ville, kunne vi lægge disse funktioner i index.ios.js, men tænk over det: Med hensyn til den slags formål, som denne nye fil tjener, kan vi blot kopiere denne fil og indsætte den i et af vores nye projekter, der kræver generering af tilfældige tal, og bruge den derfra. Desuden holder dette koden i index.ios.js så meget renere.

Vi kalder filen RandManager.js. Nedenfor vises dens indhold:

module.exports = { uniqueRandomNumbers(numRandomNumbers, lowerLimit, upperLimit) { var uniqueNumbers = ; while( uniqueNumbers.length != numRandomNumbers ) { var currentRandomNumber = this.randomNumberInRange(lowerLimit, upperLimit); if( uniqueNumbers.indexOf(currentRandomNumber) === -1 ) uniqueNumbers.push(currentRandomNumber); } return uniqueNumbers; }, randomNumberInRange(lowerLimit, upperLimit) { return Math.floor( Math.random() * (1 + upperLimit - lowerLimit) ) + lowerLimit; }};

Glem ikke at kræve RandManager-modulet i index.ios.js. Du skal blot tilføje: var RandManager = require('./RandManager.js'); under use strict;-angivelsen. Når vi har RandManager klar, foretager vi følgende ændringer i vores fetchWallsJSON-funktion:

fetchWallsJSON() { var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { /***/ var randomIds = RandManager.uniqueRandomNumbers(NUM_WALLPAPERS, 0, jsonData.length); var walls = ; randomIds.forEach(randomId => { walls.push(jsonData); }); this.setState({ isLoading: false, wallsJSON: .concat(walls) }); /***/ }) .catch( error => console.log('JSON Fetch error : ' + error) );}

Når vi har jsonData, henter vi unikke tilfældige tal fra RandManager og gemmer dem i randomIds-arrayet. Derefter sløjfer vi gennem dette array og henter tapetdataobjekter, der er til stede på et bestemt randomId, og gemmer dem i walls arrayet.

Dernæst opdaterer vi vores tilstandsvariabler: isLoading til false, da data er blevet hentet, og wallsJSON til walls.

For at se resultaterne ændrer vi renderResults-funktionen, så den ligner følgende:

renderResults() {/***/ var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( . <View> {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.id} </Text> ); })} .</View> ); }/***/}

I den allerførste linje inde i renderResults bruger vi en ny ES2015-funktion kaldet destructuring. Med destrukturering er det lykkedes os at erstatte:

var wallsJSON = this.state.wallsJSON, isLoading = this.state.isLoading;

med:

var {wallsJSON, isLoading} = this.state;

ES2015 er ret cool, det siger jeg dig.

Dernæst gennemløber vi inde i View de hentede wallsJSON-data ved hjælp af map. Når du vil loope gennem en samling i JSX, bruger du map-konstruktionen.

Og når du looper gennem et array eller en samling og renderer en komponent, kræver React Native også, at du giver et key, et unikt ID til hver af de underordnede komponenter, der renderes. Det er derfor, du ser en nøgleegenskab i

<Text key={index}>

Når simulatoren opdateres…

Vi ser fem forskellige tilfældige tapet-ID’er, der vises. Ændr {wallpaper.id} til {wallpaper.author} i renderResults, og du skulle se noget i retning af følgende.

Godt! Nu er vi i gang. Vi er nu i stand til at hente og filtrere det angivne antal (fem i dette tilfælde) af tilfældige wallpapers fra API’et. Det ser ud til, at vi er færdige for dette afsnit. High five!

Tilføjelse af Swiper-komponenten

I dette afsnit vil vi inkludere en Swiper-komponent i vores app. Denne komponent vil give os mulighed for at vise baggrunde i en container, der kan swipe.

Du lærer, hvordan du inkluderer en React Native-komponent fra en tredjepart i vores app. React Native har en fantastisk fællesskabsstøtte, og på GitHub er der en rig samling af alle mulige forskellige tredjepartskomponenter.

Til vores formål vil vi bruge react-native-swiper.

Kør til projektmappen i terminalen, og kør følgende kommando:

npm install react-native-swiper --save

Kræv nu Swiper-komponenten: tilføj var Swiper = require('react-native-swiper'); under use strict.

Lad os prøve vores nyligt inkluderede Swiper-komponent.

Gå til renderResults-metoden, og erstat View med Swiper. Når du har gjort dette, bør din renderResults se således ud:

renderResults() { var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( /***/ <Swiper> /***/ {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.author} </Text> ); })} /***/ </Swiper> /***/ ); }}

Det resulterer i følgende:

I stedet for at vise forfatternavnene som en liste har vi lagt dem i en swiper, som giver hvert tapet sin helt egen skærm, som vi kan stryge hen over. Vi skal gøre et par ting mere her: Tilføj følgende attributter til Swiper-komponenten som vist.

<Swiper/***/dot.{<View style={{backgroundColor:'rgba(255,255,255,.4)', width: 8, height: 8,borderRadius: 10, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}activeDot.{<View style={{backgroundColor: '#fff', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}loop={false} {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.author} </Text> ); })} </Swiper>

Gør dette:

• Styler pagineringspunkterne (gør de blå prikker, du ser nederst i det forrige billede, hvide og større).
• Deaktiverer kontinuerlig swipning (loop={false}). Det vil sige, at når du når den sidste side, og du swiper videre, bliver du ikke ført tilbage til det første tapet.
• Fyrer onMomentumScrollEnd (som vi vil dykke nærmere ned i i den næste del af tutorialen) hver gang vi er færdige med at swipe.

Med dette er vi kommet til en afslutning på første del. Sikke en rejse!

To Sum Up The React Native Tutorial

• I første afsnit lærte du at oprette et tomt React Native-projekt i Xcode.
• I andet afsnit talte vi om ES2015-klasser, og hvorfor du bør foretrække den nyere syntaks sammen med oprettelse af tilstandsvariabler og grabning af rå data fra API’et.
• I tredje afsnit gennemgik vi dynamisk rendering af appen baseret på den værdi, som en tilstandsvariabel indeholder. Vi lavede også noget let flexbox-positionering.
• I fjerde afsnit oprettede vi et helt nyt modul til at håndtere generering af tilfældige tal og gik også over at inkludere det i hovedfilen.
• I sidste afsnit tilføjede vi den første tredjepartskomponent til vores app, hvilket var en kagevandring, takket være Node.

Hertil ser vores app, for at være ærlig, ikke særlig speciel ud. Jeg ved det godt. I næste del vil vi tilføje faktiske billeder i stedet for blot forfatternavne. Ikke nok med det, vi vil også lave nogle avancerede ting som f.eks. at oprette en brugerdefineret detektor til dobbelt-tap ved hjælp af PanHandler API’en. Du vil lære, hvordan du linker et bibliotek i Xcode og giver din app adgang til Camera Roll. Vi vil også oprette vores helt egen komponent og meget mere. Lyder det interessant? Vi ses i næste del.

(da, ml, og, il)