React Native Tutorial – Building Your First iOS App With JavaScript (Part 1)

Het idee om mobiele apps te bouwen met JavaScript is niet nieuw. We hebben frameworks als Ionic en PhoneGap de uitdaging zien aangaan, en tot op zekere hoogte zijn ze erin geslaagd een behoorlijke hoeveelheid steun van ontwikkelaars en de community te krijgen. Naar deel 2 van de tutorial.

Deze frameworks en het hele idee van het bouwen van mobiele apps met JavaScript hebben me echter nooit aangesproken. Ik dacht altijd, waarom niet gewoon Swift/Objective-C of Java leren en echte apps bouwen? Dat vereist zeker een aanzienlijke hoeveelheid leren, maar is dat niet wat wij ontwikkelaars doen en waar we goed in zouden moeten zijn? Snel nieuwe talen en frameworks leren? Wat is dan het nut? Voor mij wogen de voordelen nooit op tegen de twijfels.

Tot ik dit artikel van Chalk + Chisel las, met name de volgende regel:

Snel een paar maanden vooruit, en ik ben zelfverzekerd genoeg om te zeggen dat ik misschien nooit meer een iOS-app in Objective-C of Swift schrijf.

Wat? Ben je… serieus?

Verder lezen op 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

Het lezen van zo’n boude bewering heeft me ertoe aangezet om React Native eens te proberen. Waarom niet? Ik gebruikte React al en vond het geweldig. React Native lijkt zoveel op React (duh!), dat je je er meteen thuis zult voelen als je al een React-ontwikkelaar bent. Zelfs als je dat niet bent, is React gelukkig heel gemakkelijk te doorgronden.

What We Will Be Building

Ik heb nog nooit geluk gehad met het vinden van de perfecte behang-app voor mijn iPhone in de App store. Op de desktop, Unsplash is de one-stop shop voor al mijn behang behoeften. Op de telefoon: Instellingen → Wallpaper 🙁

Dus, in tegenstelling tot sommige andere tutorials waar je counters bouwt en ze nauwelijks gebruikt, in deze tutorial bouwen we samen een app die willekeurige prachtige wallpapers van Unsplash zal trekken, ze op een esthetisch aangename manier zal weergeven en je in staat zal stellen om wallpapers van je keuze op te slaan in de Camera Roll. Geloof me, ik heb gemerkt dat ik deze app meer gebruik dan ik aanvankelijk dacht. Zelfs als je aan het eind van deze tutorial niet onder de indruk bent van React Native, dan heb je nog steeds een hele coole app voor achtergronden. Is dat niet geweldig?

Voordat we beginnen, zijn hier wat dingen waar je bekend mee moet zijn:

1. JavaScript
2. Enkele ES2015 functies, namelijk Classes, Arrow Functions, Destructuring en Template Strings
3. Mac OS X Terminal
4. CSS (yup!)
5. React (optioneel)

Een ding nog. Zoals de titel duidelijk aangeeft, gaan we in deze tutorial een iOS app bouwen. Wat vereist, ja, zelfs met React Native, dat je op een Mac zit. Met React Native kun je zeker Android-apps bouwen op Windows en Linux, maar niet iOS-apps. Daarom wordt er vanaf hier in deze tutorial vanuit gegaan dat je op Mac OS X draait.

Takeaways

Aan het eind van deze tutorial ben je vertrouwd genoeg met React Native om meteen te beginnen met het schrijven van je eigen apps. We bespreken het opzetten van een project in Xcode, het installeren van modules en componenten van derden, het linken van bibliotheken, styling met flexbox, het maken van een aangepaste gesture listener, en vele andere dingen.

Als je React nog niet eerder hebt gebruikt, zal deze tutorial je ook wegwijs maken met React. React is de nieuwe hete JS bibliotheek met veel potentieel, en ik zie het nergens heen gaan in de nabije toekomst.

Deze tutorial is verdeeld in twee delen voor uw gemak. Elk deel heeft vijf secties. In elke sectie bereiken we een doel dat ons een stap dichter brengt bij het voltooien van onze app. Ik zou adviseren dat als je eenmaal begonnen bent, je de hele sectie in een keer afmaakt, omdat ze kort zijn, en op die manier leer je het hele concept kennen dat ik probeer te introduceren zonder je flow te breken.

Voor uw referentie, de uiteindelijke code voor de app die we bouwen kan worden gevonden in deze GitHub repo.

Setting Up A Blank React Native Project

Zorg ervoor dat je Xcode 7.0 of hoger hebt geïnstalleerd. het kan gratis worden gedownload van de App Store.

De kans is groot (als je een webontwikkelaar bent en dit in 2016 leest) dat je Node al hebt geïnstalleerd. Maar als dat niet het geval is, ga je gang en installeer Node ook. Een andere belangrijke tool die we nodig zullen hebben is npm. Node wordt geleverd met npm geïnstalleerd; je zult het echter moeten updaten, omdat het nogal vaak wordt bijgewerkt. Volg deze installatie gids.

Dat is alles wat we nodig hebben. Voer nu in de terminal npm install -g react-native-cli uit. Dit zal React Native globaal op uw systeem installeren.

Als alles veel te nieuw voor u lijkt, of als u zich gewoon een beetje verloren voelt in het hele installatieproces, is de officiële “aan de slag”-gids er altijd om u te helpen.

Zoek een goede locatie op uw computer waar u het project zou willen opzetten. Als u daar bent, voert u react-native init SplashWalls uit in de terminal.

Dit zou alle vereiste modules moeten ophalen en installeren en een nieuwe map moeten maken met de naam SplashWalls.

Eén groot voordeel van React Native is dat u zowel Android- als iOS-applicaties samen kunt schrijven, waarbij het merendeel van de JavaScript-code tussen beide wordt gedeeld. In de nieuw aangemaakte map vind je twee .js-bestanden: index.android.js en index.ios.js – de namen spreken voor zich. Als je een iOS app bouwt, werk je met index.ios.js; met index.android.js voor een Android app; en beide voor, je weet wel, beide platforms.

Omdat we een iOS app bouwen, zullen we in het belang van deze tutorial en om de dingen netjes te houden, de index.android.js en de android map helemaal weggooien. index.ios.js is het bestand waar we mee zullen werken. Dit is het bestand dat als eerste wordt uitgevoerd wanneer de app wordt gestart.

Naar de ios-map en start SplashWalls.xcodeproj.

U zou een Xcode-venster moeten zien verschijnen zoals hieronder is afgebeeld.

Let op de waarschuwing in de bovenstaande afbeelding die zegt: “Geen overeenkomende provisioneringsprofielen gevonden.” Laten we dit oplossen.

Voreerst moet u de tekst in het veld Bundle Identifier wijzigen in een aangepaste tekst. U moet ervoor zorgen dat wat u ook invoert de omgekeerde DNS conventie volgt, waarin de domeinnaam van uw organisatie wordt omgekeerd en achtervoegsel met verdere identifiers. Deze conventie helpt om uw applicatie te onderscheiden van andere applicaties op een apparaat en in de App Store. Ik zal com.nashvail.me.tutorial.SplashWalls gebruiken; vervang gewoon uw naam in plaats van de mijne als u niets kunt verzinnen.

Kies vervolgens uw naam in het vervolgkeuzemenu voor teams.

Klik op Fix Issue.

Zodra we toch bezig zijn, moet u even kijken naar de sectie Deployment Info. Er zijn enkele standaardinstellingen toegepast.

Verander de instellingen in de volgende:

We maken de app portrait-only en verbergen ook de statusbalk.

Ga uw gang en klik op de knop Uitvoeren linksboven in Xcode. Dit zal een terminal venster starten zoals hieronder getoond. De initiële transformatie neemt wat tijd in beslag.

Als u klaar bent, zou u de volgende uitvoer in de simulator moeten zien:

En hiermee hebben we onze allereerste sectie voltooid.

Afhalen van behanggegevens van de API

In deze sectie zullen we de Unsplash.it API aanroepen om behanggegevens op te vragen. Maar voordat we al het interessante werk gaan doen, moeten we eerst wat dingen instellen.

Overschakelen naar ES2015-klassensyntax

Als u het bestand index.ios.js opent, zult u zien dat er al wat initiële code aanwezig is. Dit is de code die verantwoordelijk is voor de uitvoer in de simulator (vorige afbeelding).

In index.ios.js ziet u de regel code met de tekst var SplashWalls = React.createClass({ … }). We gaan dit aanpassen. We zullen ES2015’s class syntaxis gebruiken voor deze tutorial.

Wij ontwikkelaars zijn nieuwsgierige zielen. Ik weet dat je je afvraagt, Waarom? Waarom de class syntaxis?

Het komt allemaal neer op persoonlijke voorkeur. Ik heb eerder veel in object georiënteerde talen geprogrammeerd en class voelt voor mij gewoon vertrouwder aan. Bovendien kies je er met class ook voor om de code wat netter te houden, omdat je niet na elke methode-declaratie komma’s hoeft toe te voegen.

Aan de andere kant, als je class kiest, krijg je geen functies zoals autobinding of toegang tot de isMounted methode, wat helemaal niet erg is, omdat je jezelf niet echt in de problemen zult brengen door deze niet te gebruiken.

Hoe je ook kiest, je maakt tenslotte een klasse. Mijn advies zou zijn om class te gebruiken. Het is een nieuwe functie en vroeg of laat zul je ES2015 gaan gebruiken. En als je deze tutorial volgt, zul je class moeten gebruiken – je hebt niet echt een keuze!

Voor meer hierover kun je overwegen “React.Component vs React.createClass” te lezen door Naman Goel en Zach Silveira.

Als je de nodige wijzigingen hebt aangebracht, zou het blok code er nu zo uit moeten zien:

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> ); }};

Voor mensen die nieuw zijn in React, lijkt de code binnen return parens misschien een beetje gek, maar het is geen raketwetenschap, gewoon goede oude XML-achtige syntaxis genaamd JSX. Lees er hier meer over.

Vergeleken met de pre-class implementatie, is de var syntax verdwenen. Ook render: function(){… is nu gewoon render(){….

Hey! Maar wat is die Component die je aan het uitbreiden bent? En je hebt gelijk om dat te vragen. Als u het project nu in Xcode zou uitvoeren, zou u een foutmelding krijgen dat Component niet gedefinieerd is. U kunt hier twee dingen doen: vervang Component door React.Component; of voeg een nieuwe regel toe binnen het blok (hieronder weergegeven) bovenaan het bestand.

In dit en latere codevoorbeelden omring ik de nieuw toegevoegde regels met //, zodat het voor u gemakkelijker is om de code die u aan het schrijven bent te vergelijken met wat hier wordt getoond. Zorg ervoor dat als je code kopieert uit de voorbeelden, je niet eindigt met het kopiëren van // samen met de eigenlijke code. Omdat JSX geen /***/ commentaar ondersteunt, zal de app crashen als je dit in je JSX code opneemt.

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

Het enige wat het bovenstaande blok code doet is een paar toetsaanslagen besparen. Als je deze regels code niet bovenaan zou zetten, zou je bijvoorbeeld React.AppRegistry moeten schrijven in plaats van alleen AppRegistry, elke keer als je dit wilt doen. Erg cool! Is het niet? OK, niet zo veel.

Ga terug naar Xcode en start het project opnieuw om er zeker van te zijn dat je niets hebt gebroken in het proces.

Alles goed? Prima! Laten we verder gaan.

In de SplashWalls klasse, het eerste wat we moeten doen is een constructor toevoegen. In de constructor initialiseren we onze toestandsvariabelen. De enige twee toestandsvariabelen die we op dit punt nodig hebben zijn een array – wallsJSON – die alle JSON data zal opslaan die we uit de API hebben gehaald, en isLoading, die een Boolean variabele is, wat betekent dat het een waarde van waar of onwaar zal bevatten. Met deze toestandsvariabele kunnen we het laadscherm tonen en verbergen, afhankelijk van of de gegevens zijn geladen of niet.

In de SplashWalls class, voeg de constructor toe, zoals hieronder getoond.

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

Volgende, zullen we een fetchWallsJSON method definiëren, die, nou ja, doet wat hij zegt. Laat een paar regels staan onder de afsluitende accolade van de constructor en voeg de volgende regels code toe:

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

We willen dat deze functie afgaat zodra onze component succesvol is gemount. Voeg de componentDidMount methode toe. De meeste van de beschreven methodes bevinden zich in de SplashWalls klasse – ik zal niet vergeten te vermelden wanneer dat niet het geval is.

componentDidMount is een lifecycle-methode die wordt afgevuurd onmiddellijk nadat de eerste rendering heeft plaatsgevonden.

Hier vindt u een goede uitleg van alle levenscyclusmethoden van de React-componenten. Vergeet niet dat we, omdat we de nieuwere class-syntax gebruiken, de getInitialState-methode kunnen weglaten. Deze wordt vervangen door een this.state variabele declaratie in de constructor.

Het is een goed idee om methodes binnen je klasse op een nette manier te organiseren. Ik wil alle aangepaste methodes gescheiden houden van de lifecycle methodes. U zou dat ook moeten doen.

Laten we componentDidMount declareren:

componentDidMount() { this.fetchWallsJSON();}

Merk op dat we in de methode fetchWallsJSON een bericht naar de console hebben gelogd – maar waar is de console? Hou je vast.

Zorg ervoor dat je het Simulator venster geselecteerd hebt en druk op Cmd + Control + Z. Uit het menu dat tevoorschijn komt, selecteer Debug in Chrome. Dit opent een nieuw tabblad. Ga in hetzelfde tabblad naar Dev Tools (Option + Cmd + J). In de console vindt u het bericht “Wallpapers will be fetched”.

Houd de debugger voorlopig open. Ga naar unsplash.it/list in een nieuw tabblad. U zou moeten zien dat de hele viewport is gevuld met een JSON-array. Elk element in de array is een JavaScript-object met gegevens voor een enkele wallpaper. Dit is de data waar we doorheen zullen filteren en willekeurige wallpapers uit zullen halen.

Laten we eerst fetchWallsJSON meer laten doen dan alleen een bericht naar de console loggen.

 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) ); /***/ }

Ververs de simulator (Cmd + R) of, beter, schakel live herladen in door op Cmd + Ctrl + Z te drukken en Enable live reload te kiezen. Door live herladen in te schakelen hoef je de simulator niet te vernieuwen elke keer als je een wijziging aanbrengt in je code. Sla gewoon op in de IDE en de simulator wordt automatisch vernieuwd. Als je ooit een app hebt ontwikkeld in Xcode of Android Studio, zul je deze functie bijzonder verbazingwekkend vinden, omdat je niet op de Run-knop hoeft te drukken en de app niet opnieuw hoeft te compileren telkens wanneer je een wijziging aanbrengt. Deze kleine beetjes maken React Native zo veel aantrekkelijker.

Bij het verversen, na een paar seconden wachten, zou je de volgende uitvoer in de console moeten zien:

Goed, nu zijn we in staat om de JSON-gegevens van wallpapers op te halen uit de API. Zoals je misschien hebt gemerkt is er een kleine vertraging voordat de gegevens worden gelogd in de console. Dit komt omdat op de achtergrond de data wordt gedownload van de servers, wat tijd kost.

Dit lijkt een perfect moment om een laadscherm toe te voegen.

Een laadscherm toevoegen

Aan het eind van deze sectie zullen we een laadscherm laten verschijnen terwijl de JSON data wordt gedownload.

Voreerst, verwijder alles uit SplashWall class’s render method en voeg deze regels code toe:

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

We hebben twee nieuwe methodes. Laten we ze ook declareren, nu we toch bezig zijn

 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> ); }

Afhankelijk van welke waarde de isLoading toestandsvariabele heeft, zullen twee verschillende View componenten worden gerenderd. Als isLoading waar is, tonen we een laadspinner gevolgd door de tekst “Contact opnemen met Unsplash”; als isLoading onwaar is (wat betekent dat de gegevens zijn geladen) tonen we de resultaten, wat vanaf nu gewoon een Text component is die zegt “Gegevens geladen”.

Maar we missen hier iets: we veranderen de waarde van isLoading niet zodra onze gegevens zijn gedownload. Laten we dat maar eens doen. Ga naar de methode fetchWallsJSON en voeg onder de regel die jsonData naar de console logt een extra regel toe om isLoading bij te werken.

 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 is een van React’s Component API-methoden. Het is de primaire methode die wordt gebruikt om UI-updates te triggeren.

Merk op, in renderLoadingMessage hebben we een nieuwe component: ActivityIndicatorIOS (eenvoudig gezegd, de spinner). We moeten dit component importeren voordat we het kunnen gebruiken. Weet je nog dat we Component importeerden en dat we daarmee een paar toetsaanslagen bespaarden? Dat is precies wat we moeten doen.

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

We moeten nog één ding doen voordat we de resultaten kunnen zien. Merk op dat de View met daarin ActivityIndicatorIOS de stijl heeft ingesteld op styles.loadingContainer. We moeten dat definiëren. Zoek de regel met var styles = StyleSheet.create({…. Hier zul je zien dat er al enkele stijlen gedefinieerd zijn. Deze stijlen zijn verantwoordelijk voor de styling van de initiële “Welkom in React Native” boodschap in de simulator. Verwijder alle voorgedefinieerde stijlen en voeg er slechts een toe voor de loadingContainer zoals getoond.

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

Alle stijlen die je toepast op componenten in React Native worden gedeclareerd op de manier zoals hierboven getoond. StyleSheet.create neemt een JavaScript-object met stijlen als argument en vervolgens kunnen de stijlen worden benaderd met de dot-operator. Zoals we de stijl hebben toegepast op wrapper View op de volgende manier.

<View style={styles.loadingContainer}/>

Je mag stijlen ook inline declareren:

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

Dit maakt onze code wel een beetje onoverzichtelijk. Wanneer je een aantal stijlen hebt toegepast op een component, is het altijd een goed idee om ze op te slaan in een variabele.

De stijlen lijken veel op CSS, nietwaar? Weet je waarom? Omdat dat de bedoeling is – ze zijn niet anders. Dit maakt React Native nog eenvoudiger voor webontwikkelaars om op te pakken. Als je een app bouwt in een speciale IDE (Xcode, bijvoorbeeld) krijg je een StoryBoard om UI-elementen zoals knoppen en labels direct op het scherm te slepen en te positioneren. Dat kun je niet doen in React Native, wat – geloof me – helemaal geen slechte zaak is.

React Native maakt zwaar gebruik van flexbox om elementen op het scherm te positioneren. Als je eenmaal vertrouwd bent met flexbox, het positioneren van elementen rond is een koud kunstje. Ik geef altijd de voorkeur aan flexbox boven StoryBoard, punt. Het is gewoon een van die dingen die je zelf moet proberen om het verschil te zien.

Bewaar de wijzigingen, ga naar de simulator en druk op Cmd + R. Je zou het laadscherm moeten zien.

Na een paar seconden zou je het scherm moeten zien met de tekst “Data geladen”.

Filteren en kiezen van willekeurige achtergronden

In dit gedeelte filteren we de behanggegevens en kiezen we een aantal willekeurige achtergronden.

Dit gedeelte is meer gericht op JavaScript dan op React Native. We gaan door het creëren van een nieuwe module (bestand) dat zal omgaan met het genereren van willekeurige getallen. Als modules in JavaScript nieuw voor je klinken, overweeg dan om de Node.js modules docs.

Ga naar de regel boven de class declaratie en declareer een nieuwe constante die de app het aantal willekeurige wallpapers zal vertellen om te kiezen; laten we er vijf van maken.

const NUM_WALLPAPERS = 5;

Nu gaan we een module maken die ons zal helpen met het genereren van willekeurige getallen. Deze module zal twee functies exporteren. Laten we eens kijken naar elk van hen.

• uniqueRandomNumbers: Deze functie neemt drie argumenten in. Het eerste is het aantal willekeurige getallen dat moet worden teruggegeven. De volgende twee argumenten bepalen het bereik waarin de willekeurige getallen moeten worden teruggegeven, namelijk lowerLimit en upperLimit. Indien u de functie uniqueRandomNumbers(5, 10, 20) aanroept, krijgt u een reeks van vijf unieke willekeurige getallen tussen 10 en 20.
• randomNumberInRange: Deze functie neemt twee argumenten die respectievelijk de onder- en bovengrens bepalen waartussen een enkel willekeurig getal wordt teruggegeven. Als u bijvoorbeeld randomNumberInRange(2, 10) aanroept, wordt een uniek willekeurig getal tussen 2 en 10 teruggegeven.

We hadden beide functies in één kunnen samenvoegen, maar omdat ik een prediker ben van code van goede kwaliteit, volg ik het enkelvoudige verantwoordelijkheidsprincipe. SRP stelt, min of meer, dat elke functie één ding goed moet doen en niets anders. Het volgen van goede programmeerprincipes bespaart je een aantal toekomstige kopzorgen.

Maak een nieuw bestand in dezelfde directory als index.ios.js. Als we zouden willen, kunnen we deze functies in index.ios.js zetten, maar denk erover na: voor het soort doel dat dit nieuwe bestand dient, kunnen we dit bestand gewoon kopiëren en plakken in elk van onze nieuwe projecten die het genereren van willekeurige getallen vereist en het vanaf daar gebruiken. Bovendien houdt dit de code binnen index.ios.js een stuk schoner.

We noemen het bestand RandManager.js. Hieronder zie je de inhoud:

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; }};

Vergeet niet om de RandManager module in index.ios.js te vereisen. Voeg gewoon toe: var RandManager = require('./RandManager.js'); onder de use strict; verklaring. Zodra we RandManager klaar hebben, maken we de volgende wijzigingen in onze fetchWallsJSON functie:

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) );}

Zodra we de jsonData hebben, halen we unieke willekeurige getallen uit RandManager en slaan ze op in de randomIds array. Dan lopen we door deze array, pikken behang data objecten op die aanwezig zijn op een bepaalde randomId en slaan ze op in walls array.

Dan werken we onze toestandsvariabelen bij: isLoading naar false omdat de gegevens zijn gedownload; en wallsJSON naar walls.

Om het resultaat te zien, wijzigen we de renderResults functie zodat deze op het volgende lijkt:

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

In de allereerste regel binnen renderResults maken we gebruik van een nieuwe ES2015 functie genaamd destructuring. Met destructuring zijn we erin geslaagd om:

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

te vervangen door:

var {wallsJSON, isLoading} = this.state;

ES2015 is behoorlijk cool, zeg ik je.

Dan, binnen de View lopen we door de opgehaalde wallsJSON gegevens met behulp van map. Wanneer je in JSX door een verzameling wilt lussen, gebruik je de map construct.

Ook, wanneer je door een array of verzameling lust en een component rendert, vereist React Native dat je een key, een unieke ID geeft aan elk van de kindcomponenten die rendert. Daarom ziet u een sleutel eigenschap in

<Text key={index}>

Als de simulator zich ververst…

We zien vijf verschillende willekeurige behang ID’s worden weergegeven. Verander {wallpaper.id} in {wallpaper.author} in renderResults en u zou iets als het volgende moeten zien.

Geweldig! Nu zijn we aan het praten. We zijn nu in staat om het opgegeven aantal (vijf, in dit geval) willekeurige wallpapers op te halen en te filteren uit de API. Het lijkt erop dat we klaar zijn voor dit gedeelte. High five!

Adding The Swiper Component

In deze sectie zullen we een Swiper component in onze app opnemen. Met dit component kunnen we wallpapers in een veegbare container weergeven.

Je leert hoe je een React Native-component van derden in onze app kunt opnemen. React Native heeft geweldige ondersteuning van de gemeenschap en op GitHub is er een rijke verzameling van allerlei verschillende third-party componenten.

Voor onze doeleinden zullen we react-native-swiper gebruiken.

Ga naar de projectdirectory in de terminal en voer het volgende commando uit:

npm install react-native-swiper --save

Neem nu de Swiper component nodig: voeg var Swiper = require('react-native-swiper'); toe onder use strict.

Laten we onze nieuw opgenomen Swiper component uitproberen.

Ga naar de renderResults methode en vervang View door Swiper. Hierna zou uw renderResults er als volgt uit moeten zien:

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

Dit resulteert in het volgende:

In plaats van de namen van auteurs als een lijst weer te geven, hebben we ze in een swiper gezet die elke wallpaper zijn eigen scherm geeft, waar we overheen kunnen vegen. We moeten hier nog een paar dingen doen: voeg de volgende attributen toe aan de Swiper component zoals getoond.

<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>

Doen we dit:

• Styleert de paginatie punten (maakt de blauwe punten die je onderaan ziet in de vorige afbeelding wit en groter).
• Schakelt continu vegen uit (loop={false}). Dat wil zeggen, zodra u de laatste pagina bereikt en u veegt verder, wordt u niet teruggebracht naar de eerste wallpaper.
• Vuurt onMomentumScrollEnd (waar we verder op ingaan in het volgende deel van de tutorial) elke keer als we klaar zijn met vegen.

Met dit zijn we aan het einde gekomen van het eerste deel. Wat een reis!

To sum Up The React Native Tutorial

• In het eerste deel heb je geleerd hoe je een leeg React Native project in Xcode opzet.
• In het tweede deel hebben we het gehad over ES2015 classes en waarom je de nieuwere syntaxis zou moeten prefereren, samen met het creëren van state variabelen en het grijpen van ruwe data uit de API.
• In deel drie zijn we ingegaan op het dynamisch renderen van de app op basis van de waarde die een state variabele bevat. Ook hebben we wat lichte flexbox positionering gedaan.
• In de vierde sectie hebben we een gloednieuwe module gemaakt om willekeurige getallen te genereren en ook over het opnemen ervan in het hoofdbestand.
• In de laatste sectie hebben we de eerste third-party component aan onze app toegevoegd, wat een peulenschil was, dankzij Node.

Tot nu toe, om eerlijk te zijn, ziet onze app er niet erg bijzonder uit. Ik weet het. In het volgende deel zullen we echte afbeeldingen toevoegen in plaats van alleen auteursnamen. Niet alleen dat, we zullen ook wat geavanceerde dingen doen zoals het maken van een aangepaste dubbel-tik detector met behulp van de PanHandler API. Je zult leren hoe je een bibliotheek in Xcode koppelt en je app toegang geeft tot de Camera Roll. We zullen ook onze eigen component maken en nog veel meer. Klinkt interessant? Tot ziens in het volgende deel.

(da, ml, og, il)