React Native Tutorial – Construirea primei aplicații pentru iOS cu JavaScript (Partea 1)

Despre autor

Nash Vail are o pasiune pentru proiectarea interfețelor de utilizator. El este în prezent student la Informatică și caută în mod activ oportunități de stagiu. …Mai multe despreNash↬

Ideea de a construi aplicații mobile cu JavaScript nu este nouă. Am văzut framework-uri precum Ionic și PhoneGap care au acceptat provocarea și, într-o oarecare măsură, au reușit să câștige o bună parte din sprijinul dezvoltatorilor și al comunității. La partea 2 a tutorialului.

Aceste cadre și întreaga idee de a construi aplicații mobile cu JavaScript nu m-au atras niciodată, totuși. Întotdeauna m-am gândit, de ce să nu învăț Swift/Objective-C sau Java și să construiesc aplicații reale? Asta necesită cu siguranță o cantitate semnificativă de învățare, dar nu asta facem noi, dezvoltatorii, și nu la asta ar trebui să fim buni? Să învățăm rapid noi limbaje și cadre de lucru? Ce rost are, atunci? Pentru mine, avantajele nu au depășit niciodată îndoielile.

Până când am citit acest articol din Chalk + Chisel, în special următorul rând:

Avansați cu câteva luni și sunt suficient de încrezător pentru a spune că s-ar putea să nu mai scriu niciodată o aplicație iOS în Objective-C sau Swift.

Ce? Ești, cumva… serios?

Lecturi suplimentare pe SmashingMag:

• De ce ar trebui să luați în considerare React Native pentru aplicația dvs. mobilă
• Server-Side Rendering With React, Node And Express
• Cum să scalați aplicațiile React
• Internaționalizarea aplicațiilor React

Citirea unei afirmații atât de îndrăznețe m-a făcut să merg mai departe și să dau o șansă React Native. De ce nu? Foloseam deja React și îmi plăcea la nebunie. React Native este atât de asemănător cu React (duh!), încât vă veți simți ca acasă dacă sunteți deja un dezvoltator React. Chiar dacă nu sunteți, React se întâmplă, din fericire, să fie foarte ușor de învățat.

Ce vom construi

Niciodată nu am avut noroc să găsesc în App Store aplicația perfectă pentru tapet pentru iPhone-ul meu. Pe desktop, Unsplash este magazinul unic pentru toate nevoile mele de tapet. Pe telefon: Settings → Wallpaper 🙁

Așadar, spre deosebire de alte tutoriale în care construiești contoare și abia dacă le folosești, în acest tutorial, împreună ne vom construi o aplicație care va extrage la întâmplare imagini de fundal uimitoare din Unsplash, le va afișa într-un mod plăcut din punct de vedere estetic și îți va permite să salvezi imagini de fundal la alegere în Camera Roll. Credeți-mă, m-am trezit folosind această aplicație mai mult decât am crezut inițial. Chiar dacă până la finalul acestui tutorial React Native nu reușește să vă impresioneze, tot veți ajunge să aveți o aplicație de tapet foarte mișto. Nu-i așa că e grozav?

Înainte de a începe, iată câteva lucruri cu care ar trebui să fiți familiarizați:

1. JavaScript
2. Câteva caracteristici ES2015, și anume Classes, Arrow Functions, Destructuring și Template Strings
3. Mac OS X Terminal
4. CSS (yup!)
5. React (opțional)

Încă un lucru. După cum spune clar titlul, în acest tutorial vom construi o aplicație iOS. Ceea ce necesită, da, chiar și cu React Native, să fiți pe un Mac. Cu React Native poți cu siguranță să construiești aplicații Android pe Windows și Linux, dar nu și pe cele pentru iOS. Prin urmare, de aici încolo, acest tutorial presupune că folosiți Mac OS X.

Takeaways

Până la sfârșitul acestui tutorial, veți fi suficient de familiarizați cu React Native pentru a începe imediat să vă scrieți propriile aplicații. Vom trece în revistă configurarea unui proiect în Xcode, instalarea modulelor și componentelor de la terți, legarea bibliotecilor, stilizarea cu flexbox, crearea unui ascultător de gesturi personalizat și multe alte lucruri.

Dacă nu ați mai folosit React până acum, acest tutorial vă va configura, de asemenea, cu React. React este noua bibliotecă JS în vogă, cu mult potențial, și nu văd că va pleca nicăieri în viitorul apropiat.

Acest tutorial a fost împărțit în două părți pentru confortul dumneavoastră. Fiecare parte are cinci secțiuni. În fiecare secțiune îndeplinim un obiectiv care ne duce cu un pas mai aproape de finalizarea aplicației noastre. V-aș sfătui ca, odată începută, să terminați întreaga secțiune dintr-o singură dată, deoarece sunt scurte și, în acest fel, veți cunoaște întregul concept pe care încerc să îl introduc fără să vă întrerupeți fluxul.

Pentru referință, codul final al aplicației pe care o construim poate fi găsit în acest repo GitHub.

Setting Up A Blank React Native Project

Asigurați-vă că aveți instalat Xcode 7.0 sau o versiune mai recentă. poate fi descărcat gratuit din App Store.

Sunt șanse (dacă sunteți un dezvoltator web și citiți acest lucru în 2016) să aveți deja instalat Node. Dar dacă nu este cazul, mergeți mai departe și instalați și Node. Un alt instrument important de care vom avea nevoie este npm. Node vine cu npm instalat; cu toate acestea, va trebui să îl actualizați, deoarece este actualizat destul de frecvent. Urmați acest ghid de instalare.

Acesta este tot ce ne va trebui. Acum, din terminal rulați npm install -g react-native-cli. Acest lucru va instala React Native la nivel global pe sistemul dumneavoastră.

Dacă totul vi se pare mult prea nou pentru dumneavoastră, sau pur și simplu vă simțiți puțin pierduți în întregul proces de instalare, ghidul oficial de inițiere este întotdeauna acolo pentru a vă ajuta.

Găsește o locație bună pe computerul tău unde ai vrea să configurezi proiectul. Odată ajuns acolo, din terminal rulați react-native init SplashWalls.

Acest lucru ar trebui să aducă și să instaleze toate modulele necesare și să creeze un nou folder numit SplashWalls.

Un lucru grozav la React Native este că puteți scrie atât aplicații pentru Android, cât și pentru iOS împreună, cu o majoritate a codului JavaScript partajat între ele. În interiorul folderului nou creat veți găsi două fișiere .js: index.android.js și index.ios.js – numele sunt auto-explicative. Dacă construiți o aplicație iOS, veți lucra cu index.ios.js; cu index.android.js pentru o aplicație Android; și ambele pentru, știți voi, ambele platforme.

Din moment ce construim o aplicație iOS, de dragul acestui tutorial și pentru a păstra lucrurile curate, vom scăpa de index.android.js și de dosarul android cu totul. index.ios.js este fișierul cu care vom lucra. Acesta este fișierul care este executat prima dată la lansarea aplicației.

În continuare, mergeți în dosarul ios și porniți SplashWalls.xcodeproj.

Ar trebui să vedeți o fereastră Xcode apărând ca cea prezentată mai jos.

Observați avertismentul din imaginea de mai sus care spune „No matching provisioning profiles found”. Să rezolvăm acest lucru.

În primul rând, schimbați textul din câmpul Bundle Identifier în ceva personalizat. Trebuie să vă asigurați că ceea ce introduceți respectă convenția DNS inversă, în care numele de domeniu al organizației dvs. este inversat și sufixat cu alți identificatori. Această convenție ajută la distingerea aplicației dvs. de altele de pe un dispozitiv și de pe App Store. Eu voi folosi com.nashvail.me.tutorial.SplashWalls; pur și simplu înlocuiți numele dvs. în locul numelui meu dacă se pare că nu reușiți să inventați ceva.

În continuare, alegeți numele dvs. din meniul derulant al echipei.

Click pe Fix Issue.

În timp ce ne aflăm acolo, observați secțiunea Deployment Info. Are câteva setări implicite aplicate.

Modificați setările pentru a se potrivi cu următoarele:

Vom face ca aplicația să fie doar portret și vom ascunde și bara de stare.

Dați-i drumul și apăsați butonul Run (Executare) din stânga sus în Xcode. Făcând acest lucru va lansa o fereastră de terminal ca cea prezentată mai jos. Transformarea inițială durează un pic de timp.

După ce ați terminat, ar trebui să vedeți următoarea ieșire în simulator:

Și cu aceasta am finalizat prima noastră secțiune.

Fetching Wallpaper Data From The API

În această secțiune vom efectua apeluri către Unsplash.it API solicitând date despre tapet. Dar, înainte de a începe să facem toată munca interesantă, trebuie să facem câteva setări.

Switching To ES2015 Class Syntax

La deschiderea fișierului index.ios.js veți observa că este deja prezent un cod inițial. Acesta este codul responsabil pentru ieșirea în simulator (imaginea anterioară).

În interiorul index.ios.js observați linia de cod care spune var SplashWalls = React.createClass({ … }). Vom modifica acest lucru. Vom folosi sintaxa class din ES2015 pentru acest tutorial.

Noi, dezvoltatorii, suntem suflete curioase. Știu că probabil vă întrebați: De ce? De ce să trecem la sintaxa class?

Totul se reduce la preferințele personale. Am programat mult înainte în limbaje orientate pe obiecte și class mi se pare pur și simplu mai familiar. Mai mult decât atât, folosind class alegeți, de asemenea, să păstrați codul puțin mai curat, deoarece nu trebuie să adăugați virgule după fiecare declarație de metodă.

Pe de altă parte, atunci când alegeți class nu beneficiați de caracteristici precum autobinding sau accesul la metoda isMounted, ceea ce nu este deloc un lucru rău, deoarece nu vă veți găsi cu adevărat în pierdere dacă nu le folosiți.

În orice mod ați alege, până la urmă creați o clasă. Sfatul meu ar fi să folosiți class. Este o caracteristică nouă și, mai devreme sau mai târziu, vă veți trezi folosind ES2015. Și dacă urmați acest tutorial, va trebui să folosiți class – nu prea aveți de ales!

Pentru mai multe despre acest lucru, luați în considerare citirea „React.Component vs React.createClass” de Naman Goel și Zach Silveira.

După ce ați făcut modificările necesare, blocul de cod ar trebui să fie acum așa cum se arată:

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

Pentru cei care nu cunosc React, codul din interiorul parantezelor return poate părea puțin ciudat, dar nu este o știință a rachetelor, ci doar o bună și veche sintaxă de tip XML numită JSX. Citiți mai multe despre aceasta aici.

În comparație cu implementarea pre-class, sintaxa var a dispărut. De asemenea, render: function(){… este acum doar render(){….

Hey! Dar ce este acel Component pe care îl extindeți? Și ai avea dreptate să întrebi. Dacă ai rula proiectul în Xcode acum, ai primi o eroare care spune că Component nu este definit. Puteți face două lucruri aici: înlocuiți Component cu React.Component; sau adăugați o nouă linie în interiorul blocului (prezentat mai jos) în partea de sus a fișierului.

În acest exemplu de cod și în exemplele de cod ulterioare, înconjor liniile nou adăugate cu //, astfel încât să vă fie mai ușor să comparați codul pe care îl scrieți cu ceea ce este prezentat aici. Asigurați-vă doar că, dacă copiați codul din exemple, nu ajungeți să copiați // împreună cu codul propriu-zis. Deoarece JSX nu suportă comentariile /***/, veți sfârși prin a bloca aplicația dacă le includeți în codul JSX.

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

Tot ce face blocul de cod de mai sus este să vă salveze câteva apăsări de taste. De exemplu, dacă nu ați fi inclus aceste linii de cod în partea de sus, ar fi trebuit să scrieți React.AppRegistry în loc de doar AppRegistry de fiecare dată când ați fi vrut să faceți acest lucru. Destul de tare! Nu-i așa? OK, nu chiar atât de mult.

Întoarceți-vă la Xcode și rulați proiectul încă o dată pentru a vă asigura că nu ați stricat nimic în acest proces.

Totu-i în regulă? Minunat! Să mergem mai departe.

În interiorul clasei SplashWalls, primul lucru pe care trebuie să-l facem este să adăugăm un constructor. În interiorul constructorului vom inițializa variabilele noastre de stare. Singurele două variabile de stare de care vom avea nevoie în acest moment sunt un array – wallsJSON – care va stoca toate datele JSON preluate de la API și isLoading, care este o variabilă booleană, ceea ce înseamnă că va avea o valoare de true sau false. Având această variabilă de stare ne va ajuta să afișăm și să ascundem ecranul de încărcare în funcție de faptul dacă datele au fost încărcate sau nu.

În interiorul clasei SplashWalls, adăugați constructor, așa cum se arată mai jos.

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

În continuare, vom defini o metodă fetchWallsJSON, care, ei bine, face ceea ce spune. Lăsați câteva linii sub breteaua de închidere a constructorului și adăugați următoarele linii de cod:

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

Vrem ca această funcție să se declanșeze odată ce componenta noastră a fost montată cu succes. Adăugați metoda componentDidMount. Majoritatea metodelor descrise merg în interiorul clasei SplashWalls – nu voi uita să menționez când nu o fac.

componentDidMount este o metodă a ciclului de viață care este declanșată imediat după ce are loc prima redare.

Iată o explicație bună a tuturor metodelor de ciclu de viață ale componentelor React. Amintiți-vă doar că, din moment ce folosim cea mai nouă sintaxă class, putem omite metoda getInitialState. Aceasta este înlocuită de o declarație de variabilă this.state în constructor.

Este o idee bună să organizați metodele în interiorul clasei dvs. într-un mod curat. Mie îmi place să păstrez toate metodele personalizate separate de metodele din ciclul de viață. Ar trebui să faceți și voi la fel.

Să declarăm componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Observați că în interiorul metodei fetchWallsJSON am înregistrat un mesaj în consolă – dar unde este consola? Țineți-vă bine.

Asigurați-vă că aveți selectată fereastra Simulator și apăsați Cmd + Control + Z. Din meniul care apare, selectați Debug in Chrome. Acest lucru deschide o nouă filă. În timp ce vă aflați în aceeași filă, mergeți la Dev Tools (Option + Cmd + J). În consolă veți găsi mesajul „Wallpapers will be fetched”.

Păstrați debuggerul deschis pentru moment. Vizitați unsplash.it/list într-o nouă filă. Ar trebui să vedeți întregul viewport umplut cu o matrice JSON. Fiecare element din array este un obiect JavaScript care conține date pentru un singur tapet. Acestea sunt datele pe care le vom filtra și din care vom prelua imagini de fundal aleatoare.

Să facem mai întâi ca fetchWallsJSON să facă mai mult decât să înregistreze un mesaj în consolă.

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

Reîmprospătați simulatorul (Cmd + R) sau, mai bine, activați reîncărcarea live apăsând Cmd + Ctrl + Z și alegând Enable live reload. Prin activarea live reload nu trebuie să reîmprospătați simulatorul de fiecare dată când faceți o modificare a codului dumneavoastră. Este suficient să salvați în IDE și simulatorul va fi actualizat automat. Dacă ați dezvoltat vreodată o aplicație în Xcode sau Android Studio, veți găsi această caracteristică deosebit de uimitoare, deoarece nu trebuie să apăsați butonul Run și să recompilați aplicația de fiecare dată când faceți o modificare. Aceste mărunțișuri fac React Native mult mai atrăgător.

La reîmprospătare, după câteva secunde de așteptare, ar trebui să vedeți următoarea ieșire în consolă:

Bine, acum suntem capabili să recuperăm datele JSON ale imaginilor de fundal din API. După cum probabil ați observat, există o mică întârziere înainte ca datele să fie înregistrate în consolă. Acest lucru se datorează faptului că, în fundal, datele sunt descărcate de pe servere, ceea ce necesită timp.

Acesta pare a fi momentul perfect pentru a adăuga un ecran de încărcare.

Aducerea unui ecran de încărcare

Până la sfârșitul acestei secțiuni vom avea un ecran de încărcare care va apărea în timp ce datele JSON sunt descărcate.

În primul rând, scăpați de tot ce se află în interiorul metodei render a clasei SplashWall și adăugați aceste linii de cod:

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

Avem două metode noi. Să le declarăm și pe ele, dacă tot suntem aici

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

În funcție de valoarea pe care o are variabila de stare isLoading, vor fi redate două componente View diferite. Dacă isLoading este adevărată, vom afișa o rotiță de încărcare urmată de textul „Contacting Unsplash”; când isLoading este falsă (ceea ce implică faptul că datele au fost încărcate), vom afișa rezultatele, care deocamdată este doar o componentă Text pe care scrie „Data loaded”.

Dar ne scapă ceva aici: nu schimbăm valoarea lui isLoading odată ce datele noastre au fost descărcate. Haideți să facem exact acest lucru. Mergeți la metoda fetchWallsJSON și sub linia care înregistrează jsonData în consolă, adăugați o linie suplimentară pentru a actualiza 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 este una dintre metodele React Component API. Este metoda principală folosită pentru a declanșa actualizările UI.

Atenție, în renderLoadingMessage avem o nouă componentă: ActivityIndicatorIOS (mai simplu spus, spinner-ul). Trebuie să importăm această componentă înainte de a o putea utiliza. Vă amintiți când am importat Component, unde am economisit câteva apăsări de taste? Va trebui să facem exact asta.

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

Trebuie să mai facem un lucru înainte de a vedea rezultatele. Observați că View care conține ActivityIndicatorIOS are stilul setat la styles.loadingContainer. Va trebui să definim asta. Găsiți linia care spune var styles = StyleSheet.create({…. Aici veți vedea că există câteva stiluri deja definite. Aceste stiluri sunt responsabile pentru stilizarea mesajului inițial „Welcome to React Native” în simulator. Scăpați de toate stilurile predefinite și adăugați doar unul pentru loadingContainer, așa cum se arată.

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

Toate stilurile pe care le aplicați componentelor în React Native sunt declarate în modul arătat mai sus. StyleSheet.create primește ca argument un obiect JavaScript care conține stiluri, iar apoi stilurile pot fi accesate cu ajutorul operatorului dot. Ca și cum am aplicat stilul la wrapperul View în felul următor.

<View style={styles.loadingContainer}/>

De asemenea, aveți voie să declarați stiluri inline:

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

Aceasta face însă codul nostru un pic mai aglomerat. Atunci când aveți mai multe stiluri aplicate unei componente, este întotdeauna o idee bună să le stocați într-o variabilă.

Stilurile seamănă foarte mult cu CSS, nu-i așa? Știți de ce? Pentru că așa ar trebui să fie – nu sunt deloc diferite. Acest lucru face ca React Native să fie și mai ușor de preluat de către dezvoltatorii web. Atunci când construiți o aplicație într-un IDE dedicat (Xcode, de exemplu), vi se pune la dispoziție un StoryBoard pentru a glisa și poziționa direct pe ecran elemente de interfață utilizator precum butoane și etichete. Nu puteți face acest lucru în React Native, ceea ce – credeți-mă – nu este deloc un lucru rău.

React Native folosește intensiv flexbox pentru a poziționa elementele pe ecran. Odată ce vă simțiți confortabil cu flexbox, poziționarea elementelor în jur este o briză. Voi prefera în orice zi aspectul flexbox față de StoryBoard, punct. Este doar unul dintre acele lucruri pe care trebuie să le încerci tu însuți pentru a-ți da seama de diferență.

Salvați modificările, mergeți la simulator și apăsați Cmd + R. Ar trebui să vedeți ecranul de încărcare.

După câteva secunde ar trebui să vedeți ecranul care spune „Data loaded”.

Filtrarea și selectarea de imagini de fundal aleatorii

În această secțiune vom filtra prin datele de imagini de fundal și vom alege un număr specificat de imagini de fundal aleatorii.

Această secțiune se va concentra mai mult pe JavaScript decât pe React Native. Vom trece prin crearea unui nou modul (fișier) care se va ocupa de generarea numerelor aleatoare. Dacă modulele în JavaScript vi se par noi, luați în considerare posibilitatea de a parcurge documentația modulelor Node.js.

Direcționați-vă la linia de deasupra declarației class și declarați o nouă constantă care va spune aplicației numărul de imagini de fundal aleatoare de ales; să fie cinci.

const NUM_WALLPAPERS = 5;

Acum vom crea un modul care ne va ajuta cu generarea numerelor aleatoare. Acest modul va exporta două funcții. Să aruncăm o privire asupra fiecăreia dintre ele.

• uniqueRandomNumbers: Această funcție primește trei argumente. Primul este numărul de numere aleatoare care urmează să fie returnate. Următoarele două argumente definesc intervalul în care trebuie returnate numerele aleatoare, și anume lowerLimit și upperLimit. Dacă apelați funcția uniqueRandomNumbers(5, 10, 20), vi se va returna o matrice de cinci numere aleatoare unice cuprinse între 10 și 20.
• randomNumberInRange: Această funcție primește două argumente care definesc limita inferioară și, respectiv, superioară între care se returnează un singur număr aleator. De exemplu, dacă apelați randomNumberInRange(2, 10) se returnează un număr aleatoriu unic între 2 și 10.

Am fi putut unifica aceste două funcții într-una singură, dar cum eu sunt un predicator al codului de bună calitate, urmez principiul responsabilității unice. SRP afirmă, mai mult sau mai puțin, că fiecare funcție ar trebui să facă un singur lucru bine și să nu facă nimic altceva. Urmând principiile bunei programări vă scutește de o serie de dureri de cap viitoare.

Crearea unui nou fișier în același director cu index.ios.js. Dacă am vrea, putem pune aceste funcții în index.ios.js, dar gândiți-vă: pentru tipul de scop pe care îl are acest nou fișier, putem pur și simplu să copiem acest fișier și să-l lipim în oricare dintre noile noastre proiecte care necesită generarea de numere aleatoare și să-l folosim de acolo. De asemenea, acest lucru menține codul din index.ios.js cu atât mai curat.

Vom numi fișierul RandManager.js. Mai jos este prezentat conținutul său:

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

Nu uitați să cereți modulul RandManager în index.ios.js. Trebuie doar să adăugați: var RandManager = require('./RandManager.js'); sub declarația use strict;. Odată ce avem RandManager gata, vom face următoarele modificări la funcția noastră fetchWallsJSON:

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

După ce avem jsonData, vom prelua numere aleatoare unice din RandManager și le vom stoca în matricea randomIds. Apoi facem o buclă prin această matrice, preluând obiectele de date de tapet prezente la un anumit randomId și le stocăm în matricea walls.

Apoi actualizăm variabilele de stare: isLoading la false, deoarece datele au fost descărcate; și wallsJSON la walls.

Pentru a vedea rezultatele, modificați funcția renderResults pentru a semăna cu următoarele:

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

În prima linie din interiorul renderResults folosim o nouă caracteristică ES2015 numită destructurare. Cu ajutorul destructurării am reușit să înlocuim:

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

cu:

var {wallsJSON, isLoading} = this.state;

ES2015 este destul de mișto, vă spun eu.

Apoi, în interiorul lui View facem o buclă prin datele recuperate wallsJSON folosind map. Ori de câte ori doriți să parcurgeți o colecție în buclă în JSX, utilizați construcția map.

De asemenea, atunci când parcurgeți o matrice sau o colecție și redați o componentă, React Native vă cere să dați un key, un ID unic pentru fiecare dintre componentele copil care se redau. Acesta este motivul pentru care vedeți o proprietate cheie în

<Text key={index}>

După ce simulatorul se reîmprospătează…

Vezi cinci ID-uri diferite aleatoare de tapet care sunt afișate. Schimbați {wallpaper.id} în {wallpaper.author} în renderResults și ar trebui să vedeți ceva de genul următor.

Genial! Acum vorbim. Acum suntem capabili să recuperăm și să filtrăm numărul specificat (cinci, în acest caz) de imagini de fundal aleatorii din API. Se pare că am terminat pentru această secțiune. High five!

Adding The Swiper Component

În această secțiune vom include o componentă Swiper în aplicația noastră. Această componentă ne va permite să afișăm imagini de fundal într-un container care poate fi glisat.

Vă veți învăța cum să includeți o componentă React Native terță parte în aplicația noastră. React Native are un suport uimitor din partea comunității și pe GitHub există o colecție bogată de tot felul de componente terțe diferite.

Pentru scopurile noastre vom folosi react-native-swiper.

Direcționați-vă în directorul proiectului în terminal și rulați următoarea comandă:

npm install react-native-swiper --save

Acum cereți componenta Swiper: adăugați var Swiper = require('react-native-swiper'); sub use strict.

Să încercăm componenta noastră nou inclusă Swiper.

Vă la metoda renderResults și înlocuiți View cu Swiper. După ce faceți acest lucru, renderResults ar trebui să arate așa:

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

Făcând acest lucru rezultă următoarele:

În loc să arătăm numele autorilor sub formă de listă, le-am pus într-un swiper care oferă fiecărui tapet propriul său ecran, pe care îl putem glisa. Trebuie să mai facem câteva lucruri aici: adăugăm următoarele atribute la componenta Swiper așa cum se arată.

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

Făcând acest lucru:

• Stilizează punctele de paginare (face ca punctele albastre pe care le vedeți în partea de jos în imaginea anterioară să fie albe și mai mari).
• Dezactivează glisarea continuă (loop={false}). Adică, odată ce ajungeți la ultima pagină și glisați mai departe, nu mai sunteți dus înapoi la primul tapet.
• Dezactivează onMomentumScrollEnd (pe care îl vom aprofunda în partea următoare a tutorialului) de fiecare dată când terminăm de glisat.

Cu aceasta, am ajuns la sfârșitul primei părți. Ce călătorie!

Să rezumăm tutorialul React Native

• În prima secțiune ați învățat cum să configurați un proiect React Native gol în Xcode.
• În a doua secțiune am vorbit despre clasele ES2015 și de ce ar trebui să preferați cea mai nouă sintaxă, împreună cu crearea variabilelor de stare și preluarea datelor brute din API.
• În secțiunea a treia am trecut în revistă redarea dinamică a aplicației pe baza valorii pe care o deține o variabilă de stare. De asemenea, am făcut câteva poziționări flexbox ușoare.
• În a patra secțiune am creat un modul nou pentru a gestiona generarea numerelor aleatoare și am trecut, de asemenea, peste includerea acestuia în fișierul principal.
• În ultima secțiune am adăugat prima componentă terță parte la aplicația noastră, ceea ce a fost floare la ureche, mulțumită lui Node.

Până acum, ca să fiu sincer, aplicația noastră nu arată foarte special. Știu. În partea următoare vom adăuga imagini reale în loc de doar numele autorilor. Nu numai atât, vom face câteva lucruri avansate, cum ar fi crearea unui detector personalizat de dublă atingere folosind API-ul PanHandler. Veți învăța cum să legați o bibliotecă în Xcode și să acordați aplicației dvs. acces la Camera Roll. Vom crea, de asemenea, propria noastră componentă și multe altele. Sună interesant? Ne vedem în partea următoare.

(da, ml, og, il)