React Native Tutorial – Ensimmäisen iOS-sovelluksen rakentaminen JavaScriptillä (osa 1)

Tekijästä

Nash Vailin intohimona on suunnitella ja rakentaa käyttöliittymät. Hän opiskelee tällä hetkellä tietotekniikkaa ja etsii aktiivisesti harjoittelupaikkoja. …LisätietojaNash↬

Ajatus mobiilisovellusten rakentamisesta JavaScriptillä ei ole uusi. Olemme nähneet Ionicin ja PhoneGapin kaltaisten kehysten ottavan haasteen vastaan ja jossain määrin onnistuneen saamaan melkoisen määrän kehittäjien ja yhteisön tukea. Tutoriaalin 2. osaan.

Nämä kehykset ja koko ajatus mobiilisovellusten rakentamisesta JavaScriptillä eivät kuitenkaan koskaan kiinnostaneet minua. Ajattelin aina, miksi en vain opettelisi Swift/Objective-C:tä tai Javaa ja rakentaisi oikeita sovelluksia. Se vaatii varmasti huomattavan määrän oppimista, mutta eikö se ole sitä, mitä me kehittäjät teemme ja missä meidän pitäisi olla hyviä? Oppia nopeasti uusia kieliä ja kehyksiä? Mitä järkeä siinä sitten on? Minulle edut eivät koskaan ylittäneet epäilyjä.

Kunnes luin tämän artikkelin Chalk + Chisel -lehdestä, erityisesti seuraavan rivin:

Pari kuukautta eteenpäin, ja olen tarpeeksi varma sanoakseni, etten ehkä enää koskaan kirjoita iOS-sovellusta Objective-C:llä tai Swiftillä.

Mitä? Oletko sinä… tosissasi?

Lisälukemista SmashingMagissa:

• Miksi sinun pitäisi harkita React Nativea mobiilisovelluksessasi
• Server-Side Rendering With React, Node And Express
• How To Scale React Applications
• Internationalizing React Apps

Lukien näin rohkean väitteen sain itseni lähtemään kokeilemaan React Nativea. Miksipä ei? Käytin jo Reactia ja rakastin sitä. React Native on niin samanlainen kuin React (duh!), että tunnet olosi kotoisaksi, jos olet jo React-kehittäjä. Vaikka et olisikaan, React sattuu onneksi olemaan erittäin helppo omaksua.

Mitä tulemme rakentamaan

En ole koskaan ollut onnekas löytääkseni täydellistä taustakuvasovellusta iPhoneeni App Storesta. Työpöydällä Unsplash on yhden luukun paikka kaikkiin taustakuvatarpeisiini. Puhelimessa: Asetukset → Taustakuva 🙁

Toisin kuin joissakin muissa opetusohjelmissa, joissa rakennat laskurit ja tuskin käytät niitä, tässä opetusohjelmassa rakennamme yhdessä itsellemme sovelluksen, joka vetää satunnaisia upeita taustakuvia Unsplashista, näyttää ne esteettisesti miellyttävällä tavalla ja antaa sinulle mahdollisuuden tallentaa haluamasi taustakuvat kamerarullaan. Usko pois, olen huomannut käyttäväni tätä sovellusta enemmän kuin alun perin ajattelin. Vaikka tämän opetusohjelman lopussa React Native ei tekisikään sinuun vaikutusta, sinulla on silti lopulta todella hieno taustakuvasovellus. Eikö olekin hienoa?

Ennen kuin aloitamme, tässä on muutamia asioita, jotka sinun pitäisi tuntea:

1. JavaScript
2. Joitakin ES2015-ominaisuuksia, nimittäin luokkia, nuolifunktioita, destrukturointia ja template-merkkijonoja
3. Mac OS X:n päätepysäkki
4. CSS (jep!)
5. React (valinnainen)

Yksi asia vielä. Kuten otsikko selvästi kertoo, tässä tutoriaalissa rakennamme iOS-sovelluksen. Mikä edellyttää, kyllä, jopa React Nativea käytettäessä, että olet Macilla. React Nativen avulla voit varmasti rakentaa Android-sovelluksia Windowsissa ja Linuxissa, mutta et iOS-sovelluksia. Siksi tästä eteenpäin tämä opetusohjelma olettaa, että käytät Mac OS X:ää.

Takeaways

Tämän opetusohjelman loppuun mennessä tunnet React Nativea tarpeeksi hyvin, jotta voit alkaa kirjoittaa omia sovelluksiasi heti. Käymme läpi projektin perustamisen Xcodessa, kolmansien osapuolten moduulien ja komponenttien asentamisen, kirjastojen linkittämisen, muotoilun flexboxin avulla, mukautetun eleiden kuuntelijan luomisen ja monia muita asioita.

Jos et ole aiemmin käyttänyt Reactia, tässä opetusohjelmassa tutustut myös Reactiin. React on uusi kuuma JS-kirjasto, jolla on paljon potentiaalia, enkä näe sen menevän mihinkään lähitulevaisuudessa.

Tämä opetusohjelma on jaettu kahteen osaan mukavuuden vuoksi. Kummassakin osassa on viisi osiota. Jokaisessa osiossa saavutamme tavoitteen, joka vie meidät askeleen lähemmäs sovelluksemme viimeistelyä. Neuvoisin, että kun olet aloittanut, sinun pitäisi suorittaa koko osio kerralla loppuun, koska ne ovat lyhyitä, ja sillä tavalla pääset tutustumaan koko käsitteeseen, jonka yritän esitellä rikkomatta virtaa.

Viitteeksi, rakentamamme sovelluksen lopullinen koodi löytyy tästä GitHub-reposta.

Tyhjän React Native -projektin asettaminen

Varmista, että sinulla on Xcode 7.0 tai uudempi versio asennettuna. sen voi ladata ilmaiseksi App Storesta.

Mahdollisuuksien mukaan (jos olet web-kehittäjä ja luet tätä vuonna 2016) sinulla on jo Node asennettuna. Mutta jos näin ei ole, mene ja asenna myös Node. Toinen tärkeä työkalu, jota tarvitsemme, on npm. Noden mukana tulee npm asennettuna; sinun on kuitenkin päivitettävä se, sillä sitä päivitetään melko usein. Seuraa tätä asennusohjetta.

Muuta emme tarvitse. Suorita nyt terminaalista npm install -g react-native-cli. Tämä asentaa React Nativen globaalisti järjestelmääsi.

Jos kaikki tuntuu sinulle aivan liian uudelta tai tunnet olevasi hieman hukassa koko asennusprosessin kanssa, virallinen aloitusopas on aina apunasi.

Etsikää tietokoneeltanne hyvä paikka, jonne haluatte asentaa projektin. Kun olet siellä, suorita terminaalista react-native init SplashWalls.

Tämän pitäisi hakea ja asentaa kaikki tarvittavat moduulit ja luoda uusi kansio nimeltä SplashWalls.

Yksi hieno juttu React Nativessa on se, että voit kirjoittaa sekä Android- että iOS-sovelluksia yhdessä, ja suurin osa JavaScript-koodista on yhteistä. Juuri luodun kansion sisältä löytyy kaksi .js-tiedostoa: index.android.js ja index.ios.js – nimet ovat itsestään selviä. Jos rakennat iOS-sovellusta, työskentelet index.ios.js:n kanssa; index.android.js:n kanssa Android-sovelluksen kanssa; ja molempien kanssa, tiedäthän, molempien alustojen kanssa.

Koska rakennamme iOS-sovellusta, tämän tutoriaalin vuoksi ja jotta asiat pysyisivät siisteinä, hankkiudumme eroon index.android.js:stä ja android-kansiosta kokonaan. index.ios.js on tiedosto, jonka kanssa työskentelemme. Tämä on tiedosto, joka suoritetaan ensimmäisenä, kun sovellus käynnistyy.

Seuraavaksi siirry ios-kansioon ja käynnistä SplashWalls.xcodeproj.

Sinun pitäisi nähdä alla olevan kaltainen Xcode-ikkuna avautuvan.

Huomaa yllä olevassa kuvassa oleva varoitus, jossa lukee: ”Ei löytynyt yhteensopivia provisiointityöprofiileja”. Korjataan tämä.

Vaihda ensin Bundle Identifier -kentän teksti joksikin mukautetuksi. Sinun on varmistettava, että se, mitä kirjoitat, noudattaa käänteistä DNS-käytäntöä, jossa organisaatiosi verkkotunnus käännetään päinvastaiseksi ja siihen liitetään muita tunnuksia. Tämä konventio auttaa erottamaan sovelluksesi muista sovelluksista laitteessa ja App Storessa. Käytän com.nashvail.me.tutorial.SplashWalls; korvaa nimesi yksinkertaisesti omalla nimelläni, jos et tunnu keksivän mitään.

Valitse seuraavaksi nimesi tiimin pudotusvalikosta.

Klikkaa Korjaa ongelma.

Huomaa samalla Käyttöönottotietoja-kohta. Siihen on sovellettu joitakin oletusasetuksia.

Muutetaan asetukset vastaamaan seuraavia:

Tehdään sovelluksesta pelkkä muotokuvakäyttöinen ja piilotetaan myös tilapalkki pois käytöstä.

Jatka eteenpäin ja paina Suorita-painiketta vasemmalla ylhäällä vasemmalla olevasta Xcodesta. Se käynnistää alla olevan kaltaisen terminaali-ikkunan. Alkuperäinen muunnos vie hieman aikaa.

Kun se on tehty, simulaattorissa pitäisi näkyä seuraava tuloste:

Ja tällä olemme saaneet ensimmäisen osion valmiiksi.

Taustakuvatietojen hakeminen API:sta

Tässä osiossa teemme kutsuja Unsplash.it:n API:lle, jossa pyydämme taustakuvatietoja. Mutta ennen kuin ryhdymme tekemään kaikkea mielenkiintoista työtä, on tehtävä joitain asetuksia.

Vaihtaa ES2015-luokkasyntaksiin

Avatessasi index.ios.js-tiedoston huomaat, että siinä on jo alustavaa koodia. Tämä on koodi, joka vastaa simulaattorin tulosteesta (edellinen kuva).

Sisällä index.ios.js:ssä huomaa koodirivi, jossa lukee var SplashWalls = React.createClass({ … }). Aiomme muuttaa tätä. Käytämme ES2015:n class-syntaksia tässä opetusohjelmassa.

Me kehittäjät olemme uteliaita sieluja. Tiedän, että kysyt varmasti: Miksi? Miksi siirtyä class-syntaksiin?

Se on kaikki kiinni henkilökohtaisista mieltymyksistä. Olen aiemmin ohjelmoinut laajasti oliopohjaisilla kielillä, ja class tuntuu minulle vain tutummalta. Lisäksi käyttämällä class päätät myös pitää koodin hieman siistimpänä, koska sinun ei tarvitse lisätä pilkkuja jokaisen metodi-ilmoituksen perään.

Kääntöpuolena on, että kun valitset class, et saa sellaisia ominaisuuksia kuin automaattinen sitominen tai pääsy isMounted-metodiin, mikä ei ole lainkaan huono asia, koska et todellakaan ole hukassa jättäessäsi nämä käyttämättä.

Valitsitpa kumman tahansa tavan tahansa, olet kuitenkin luomassa luokkaa. Oma neuvoni olisi käyttää class. Se on uusi ominaisuus ja ennemmin tai myöhemmin huomaat käyttäväsi ES2015:tä. Ja jos seuraat tätä opetusohjelmaa, sinun on käytettävä class – sinulla ei oikeastaan ole valinnanvaraa!

Jos haluat lisätietoja tästä, kannattaa lukea Naman Goelin ja Zach Silveiran kirjoittama ”React.Component vs React.createClass”.

Kun olet tehnyt tarvittavat muutokset, koodilohkon pitäisi nyt näyttää seuraavalta:

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

Väelle, joka ei tunne Reactia, return-vertailulausekkeiden sisällä oleva koodi saattaa tuntua hieman sekopäiseltä, mutta se ei ole mitään rakettitiedettä, vaan vain vanhaa kunnon XML:n kaltaista syntaksia nimeltään JSX. Lue lisää siitä täältä.

Vertailtuna ennenclass toteutukseen, var-syntaksi on poissa. Myös render: function(){… on nyt vain render(){….

Hei! Mutta mikä on tuo Component, jota laajennat? Ja olisit oikeassa kysyessäsi. Jos suorittaisit projektin Xcodessa nyt, saisit virheilmoituksen, että Component ei ole määritelty. Voit tehdä tässä kaksi asiaa: korvata Component:n React.Component:lla; tai lisätä uuden rivin lohkon sisälle (näkyy alla) tiedoston yläosassa.

Tässä ja myöhemmissä koodiesimerkeissä ympäröin juuri lisätyt rivit //:llä, jotta sinun on helpompi verrata kirjoittamaasi koodia siihen, mitä tässä näkyy. Varmista vain, että jos kopioit koodia näytteistä, et pääty kopioimaan // varsinaisen koodin mukana. Koska JSX ei tue /***/-kommentteja, sovellus kaatuu, jos lisäät niitä JSX-koodiin.

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

Yllä oleva koodilohko säästää vain pari näppäinpainallusta. Jos et esimerkiksi sisällyttäisi näitä koodirivejä yläreunaan, sinun täytyisi kirjoittaa React.AppRegistry pelkän AppRegistry sijasta joka kerta, kun haluaisit tehdä näin. Aika helvetin siistiä! Eikö olekin? Okei, ei niinkään.

Palaa takaisin Xcodeen ja suorita projekti vielä kerran varmistaaksesi, ettet rikkonut mitään prosessissa.

Onko kaikki hyvin? Hienoa! Jatketaan eteenpäin.

SplashWalls-luokan sisällä meidän on ensin lisättävä konstruktori. Konstruktorin sisällä alustamme tilamuuttujamme. Ainoat kaksi tilamuuttujaa, joita tarvitsemme tässä vaiheessa, ovat array – wallsJSON, johon tallennetaan kaikki API:sta haettu JSON-data, ja isLoading, joka on Boolean-muuttuja, eli se pitää sisällään joko true- tai false-arvon. Tämän tilamuuttujan olemassaolo auttaa meitä näyttämään ja piilottamaan latausnäytön sen mukaan, onko data ladattu vai ei.

Luokan SplashWalls sisälle lisätään constructor alla olevan kuvan mukaisesti.

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

Seuraavaksi määrittelemme fetchWallsJSON-metodin, joka, noh, tekee sen, mitä se sanoo. Jätä pari riviä konstruktorin sulkevan hakasulkeen alapuolelle ja lisää seuraavat koodirivit:

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

Haluamme, että tämä funktio laukeaa, kun komponenttimme on onnistuneesti asennettu. Lisää componentDidMount-metodi. Suurin osa kuvatuista metodeista menee SplashWalls-luokan sisälle – en unohda mainita, milloin ei.

componentDidMount on elinkaarimetodi, joka laukaistaan heti ensimmäisen renderöinnin jälkeen.

Tässä on hyvä selitys kaikista React-komponentin elinkaarimetodeista. Muista vain, että koska käytämme uudempaa class-syntaksia, voimme jättää getInitialState-metodin pois. Se korvataan this.state-muuttujan ilmoituksella constructor.

Metodit kannattaa järjestää luokan sisällä siististi. Haluan pitää kaikki mukautetut metodit erillään elinkaarimetodeista. Niin sinunkin kannattaisi tehdä.

Tiedostetaan componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Huomaa, että metodin fetchWallsJSON sisällä olemme kirjauttaneet viestin konsoliin – mutta missä konsoli on? Pidä kiinni.

Varmista, että Simulaattori-ikkuna on valittuna ja paina Cmd + Control + Z. Valitse avautuvasta valikosta Debug in Chrome. Tämä avaa uuden välilehden. Kun olet samassa välilehdessä, siirry Dev Toolsiin (Option + Cmd + J). Konsolista löydät viestin ”Wallpapers will be fetched”.

Pitäkää debuggeri toistaiseksi auki. Käy uudessa välilehdessä osoitteessa unsplash.it/list. Sinun pitäisi nähdä koko näkymäikkuna täytettynä JSON-massalla. Jokainen array-elementti on JavaScript-objekti, joka sisältää yhden taustakuvan tiedot. Tämä on se data, jonka läpi suodatamme ja josta nappaamme satunnaisia taustakuvia.

Pannaan ensin fetchWallsJSON tekemään muutakin kuin vain kirjaamaan viesti konsoliin.

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

Virkistä simulaattori uudelleen (Cmd + R) tai, mikä on vielä parempi, ota käyttöön live-uudelleenlataus (live reload) painamalla komentoa Cmd+Ctrl+Z ja valitsemalla Enable live reload. Kun otat live reloadin käyttöön, sinun ei tarvitse päivittää simulaattoria joka kerta, kun teet muutoksia koodiin. Tallenna vain IDE:ssä, ja simulaattori päivittyy automaattisesti. Jos olet joskus aiemmin kehittänyt sovellusta Xcodessa tai Android Studiossa, tämä ominaisuus on erityisen hämmästyttävä, sillä sinun ei tarvitse painaa Suorita-painiketta ja kääntää sovellusta uudelleen joka kerta, kun teet muutoksen. Nämä pienet yksityiskohdat tekevät React Native -ohjelmasta niin paljon houkuttelevamman.

Virkistyksen jälkeen, kun olet odottanut muutaman sekunnin, sinun pitäisi nähdä konsolissa seuraava tuloste:

Hyvä, nyt pystymme noutamaan taustakuvien JSON-tiedot API:sta. Kuten olet ehkä huomannut, on pieni viive ennen kuin tiedot kirjautuvat konsoliin. Tämä johtuu siitä, että taustalla dataa ladataan palvelimilta, mikä vie aikaa.

Tämä näyttää täydelliseltä ajankohdalta lisätä latausruutu.

Latausnäytön lisääminen

Tämän osion loppuun mennessä saamme latausnäytön näkymään, kun JSON-dataa ladataan.

Ensin hankkiudutaan eroon kaikesta SplashWall-luokan render-metodin sisältä ja lisätään nämä koodirivit:

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

Meillä on kaksi uutta metodia. Julistetaan ne myös, kun kerran olemme siinä

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

Riippuen siitä, mitä arvoa isLoading-tilamuuttuja pitää sisällään, renderöidään kaksi eri View-komponenttia. Jos isLoading on true, näytämme latauspinnerin, jota seuraa teksti ”Contacting Unsplash”; kun isLoading on false (mikä viittaa siihen, että data on ladattu), näytämme tulokset, jotka tällä hetkellä ovat vain Text-komponentti, jossa lukee ”Data loaded”.

Mutta meiltä puuttuu jotain: emme muuta isLoading:n arvoa sen jälkeen, kun datamme on ladattu. Tehdään juuri niin. Siirry fetchWallsJSON-metodiin ja lisää sen rivin alle, joka kirjaa jsonData konsoliin, yksi ylimääräinen rivi, jolla päivitetään 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 on yksi Reactin Component API -metodeista. Se on ensisijainen metodi, jota käytetään käyttöliittymän päivitysten käynnistämiseen.

Huomaa, että kohdassa renderLoadingMessage meillä on uusi komponentti: ActivityIndicatorIOS (yksinkertaisesti sanottuna spinner). Meidän on tuotava tämä komponentti ennen kuin voimme käyttää sitä. Muistatko, kun tuotiin Component, jolloin säästimme pari näppäinpainallusta? Meidän täytyy tehdä juuri niin.

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

Meidän täytyy tehdä vielä yksi asia ennen kuin voimme nähdä tulokset. Huomaa, että ActivityIndicatorIOS:n sisältävän View:n tyyliksi on asetettu styles.loadingContainer. Meidän on määriteltävä se. Etsi rivi, jossa lukee var styles = StyleSheet.create({…. Tässä näet, että joitakin tyylejä on jo määritelty. Nämä tyylit vastaavat simulaattorin alkuperäisen ”Welcome to React Native” -viestin muotoilusta. Hankkiudu eroon kaikista valmiiksi määritellyistä tyyleistä ja lisää vain yksi loadingContainer:lle, kuten kuvassa näkyy.

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

Kaikki tyylit, joita sovelletaan komponentteihin React Native -ohjelmassa, ilmoitetaan edellä esitetyllä tavalla. StyleSheet.create ottaa argumenttina tyylejä sisältävän JavaScript-olion, jonka jälkeen tyylejä voidaan käyttää dot-operaattorilla. Kuten sovelsimme tyyliä wrapperiin View seuraavalla tavalla:

<View style={styles.loadingContainer}/>

Tyylejä saa myös julistaa inline:

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

Tämä tosin tekee koodistamme hieman sotkuista. Kun komponenttiin on sovellettu useita tyylejä, on aina hyvä idea tallentaa ne muuttujaan.

Tyylit näyttävät paljon CSS:ltä, eikö niin? Tiedätkö miksi? Koska niiden on tarkoitus – ne eivät eroa toisistaan. Tämä tekee React Nativesta entistä helpomman web-kehittäjille. Kun rakennat sovellusta erityisessä IDE:ssä (esimerkiksi Xcodessa), käytössäsi on StoryBoard, jonka avulla voit suoraan raahata ja sijoittaa UI-elementtejä, kuten painikkeita ja tarroja, näytölle. React Nativessa tätä ei voi tehdä, mikä – usko pois – ei ole lainkaan huono asia.

React Native käyttää runsaasti flexboxia elementtien sijoitteluun näytöllä. Kun olet oppinut tuntemaan flexboxin, elementtien sijoittelu on lastenleikkiä. Suosin milloin tahansa flexbox-asettelua StoryBoardin sijaan, piste. Se on vain yksi niistä asioista, joita täytyy kokeilla itse eron havaitsemiseksi.

Tallenna muutokset, siirry simulaattoriin ja paina Cmd + R. Sinun pitäisi nähdä latausnäyttö.

Muutaman sekunnin kuluttua pitäisi näkyä ruutu, jossa lukee ”Data loaded”.

Suodatus ja satunnaisten taustakuvien poiminta

Tässä osiossa suodatamme taustakuvatiedot läpi ja poimimme määritetyn määrän satunnaisia taustakuvia.

Tässä osiossa keskitytään enemmänkin JavaScriptiin kuin React Nativeen. Käymme läpi uuden moduulin (tiedoston) luomisen, joka hoitaa satunnaislukujen tuottamisen. Jos moduulit JavaScriptissä kuulostavat sinulle uusilta, harkitse Node.js modules docs:n läpikäymistä.

Mene class-julistuksen yläpuolella olevalle riville ja ilmoita uusi vakio, joka kertoo sovellukselle valittavien satunnaisten taustakuvien lukumäärän; olkoon se viisi.

const NUM_WALLPAPERS = 5;

Luotaan nyt moduuli, joka auttaa meitä satunnaislukujen generoinnissa. Tämä moduuli vie kaksi funktiota. Tutustutaanpa niihin kumpaankin.

• uniqueRandomNumbers: Tämä funktio ottaa vastaan kolme argumenttia. Ensimmäinen on palautettavien satunnaislukujen määrä. Seuraavat kaksi argumenttia määrittelevät alueen, jolla satunnaisluvut palautetaan, eli lowerLimit ja upperLimit. Jos kutsut funktiota uniqueRandomNumbers(5, 10, 20), sinulle palautetaan viiden yksilöllisen satunnaisluvun joukko väliltä 10 ja 20.
• randomNumberInRange: Tämä funktio ottaa vastaan kaksi argumenttia, jotka määrittelevät ala- ja ylärajan, joiden väliltä yksittäinen satunnaisluku palautetaan. Jos esimerkiksi kutsut randomNumberInRange(2, 10), palautetaan ainutkertainen satunnaisluku väliltä 2 ja 10.

Olisimme voineet yhdistää nämä molemmat funktiot yhdeksi, mutta koska olen hyvän laatukoodin saarnaaja, noudatan yhden vastuun periaatetta. SRP sanoo enemmän tai vähemmän, että jokaisen funktion pitäisi tehdä yksi asia hyvin eikä tehdä mitään muuta. Hyvien ohjelmointiperiaatteiden noudattaminen säästää monelta tulevalta päänvaivalta.

Luo uusi tiedosto samaan hakemistoon kuin index.ios.js. Jos haluaisimme, voisimme laittaa nämä funktiot index.ios.js:ään, mutta mieti asiaa: sellaiseen tarkoitukseen, jota tämä uusi tiedosto palvelee, voimme yksinkertaisesti kopioida tämän tiedoston ja liittää sen mihin tahansa uuteen projektiimme, joka vaatii satunnaislukujen tuottamista, ja käyttää sitä sieltä käsin. Lisäksi tämä pitää index.ios.js:n sisällä olevan koodin paljon siistimpänä.

Kutsumme tiedostoa RandManager.js:ksi. Alla näkyy sen sisältö:

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

Älä unohda vaatia RandManager-moduulia index.ios.js:ssä. Lisää vain: var RandManager = require('./RandManager.js'); use strict;-lausekkeen alle. Kun RandManager on valmiina, teemme seuraavat muutokset fetchWallsJSON-funktioon:

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

Kun meillä on jsonData, haemme uniikit satunnaisluvut RandManager:sta ja tallennamme ne randomIds-matriisiin. Sitten käymme silmukalla läpi tämän array:n, poimimme tietyssä randomId:ssa olevat tapettidataobjektit ja tallennamme ne walls array:iin.

Sitten päivitämme tilamuuttujamme: isLoading arvoon false, koska data on ladattu; ja wallsJSON arvoon walls.

Voidaksemme nähdä tulokset, muokkaa renderResults-funktio seuraavanlaiseksi:

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

Heti ensimmäisellä rivillä renderResults:n sisällä käytämme uutta ES2015-ominaisuutta nimeltä destrukturointi. Destrukturoinnin avulla olemme onnistuneet korvaamaan:

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

:llä:

var {wallsJSON, isLoading} = this.state;

ES2015 on aika siistiä, sanon minä.

Sitten, View:n sisällä silmukoimme haetun wallsJSON datan läpi mapin avulla. Aina kun JSX:ssä halutaan silmukoida kokoelman läpi, käytetään map-konstruktiota.

Myös, kun silmukoidaan matriisin tai kokoelman läpi ja renderöidään komponentti, React Native vaatii, että jokaiselle renderöitävälle lapsikomponentille annetaan key, eli yksilöllinen ID. Siksi näet avainominaisuuden

<Text key={index}>

Kun simulaattori päivittyy…

Näemme viisi erilaista satunnaista taustakuvan ID:tä näkyvissä. Vaihda {wallpaper.id} {wallpaper.author}:ksi kohdassa renderResults, niin sinun pitäisi nähdä jotain seuraavaa.

Hienoa! Nyt puhutaan. Pystymme nyt hakemaan ja suodattamaan määritetyn määrän (tässä tapauksessa viisi) satunnaisia taustakuvia API:sta. Näyttää siltä, että olemme valmiit tämän osion osalta. High five!

Swiper-komponentin lisääminen

Tässä osiossa lisäämme Swiper-komponentin sovellukseemme. Tämän komponentin avulla voimme näyttää taustakuvia pyyhkäistävässä säiliössä.

Oppiessasi opit sisällyttämään kolmannen osapuolen React Native -komponentin sovellukseemme. React Native -ohjelmalla on uskomaton yhteisön tuki, ja GitHubissa on runsas kokoelma kaikenlaisia erilaisia kolmannen osapuolen komponentteja.

Tarkoituksiimme käytämme react-native-swiper-komponenttia.

Siirry terminaalissa projektin hakemistoon ja suorita seuraava komento:

npm install react-native-swiper --save

Tarvitaan nyt Swiper-komponentti: lisää var Swiper = require('react-native-swiper'); use strict:n alapuolelle.

Kokeillaanpa äsken mukaan otettua Swiper-komponenttiamme.

Mene renderResults-metodin kohdalle ja korvaa View:n tilalle Swiper. Tämän jälkeen renderResults-komponenttisi pitäisi näyttää tältä:

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

Tekemällä näin saat tulokseksi seuraavan:

Kirjailijoiden nimien näyttämisen sijaan olemme laittaneet ne listana pyyhkäisijään, joka antaa kullekin taustakuvalle ihan oman ruudun, jota voimme pyyhkäistä yli. Meidän on tehtävä tässä vielä pari asiaa: lisäämme seuraavat attribuutit Swiper-komponenttiin, kuten kuvassa näkyy.

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

Tehdä näin:

• Tyylittää sivutuspisteet (tekee edellisen kuvan alareunassa näkyvät siniset pisteet valkoisiksi ja suuremmiksi).
• Lisää jatkuvan pyyhkäisyn pois käytöstä (loop={false}). Eli kun pääset viimeiselle sivulle ja pyyhkäiset edelleen, et pääse takaisin ensimmäiselle taustakuvalle.
• Sytyttää onMomentumScrollEnd:n (johon syvennytään tarkemmin opetusohjelman seuraavassa osassa) aina, kun olemme lopettaneet pyyhkäisyn.

Niin, olemme tulleet ensimmäisen osan loppuun. Mikä matka!

Yhteenvetona React Native -oppaasta

• Ensimmäisessä osassa opit, miten tyhjä React Native -projekti perustetaan Xcodessa.
• Kakkososassa puhuimme ES2015-luokista ja siitä, miksi kannattaa suosia uudempaa syntaksia sekä tilamuuttujien luomisesta ja raa’an datan nappaamisesta API:sta.
• Kolmannessa osiossa käsiteltiin sovelluksen dynaamista renderöintiä tilamuuttujan sisältämän arvon perusteella. Lisäksi teimme kevyttä flexbox-sijoittelua.
• Viidennessä osiossa loimme upouuden moduulin käsittelemään satunnaislukujen generointia ja kävimme myös läpi sen sisällyttämistä päätiedostoon.
• Viimeisessä osiossa lisäsimme ensimmäisen kolmannen osapuolen komponentin sovellukseemme, mikä oli lastenleikkiä, kiitos Noden.

Tähän asti sovelluksemme ei rehellisesti sanottuna ole näyttänyt kovinkaan erikoiselta. Tiedän. Seuraavassa osassa lisäämme todellisia kuvia pelkkien kirjailijoiden nimien sijaan. Sen lisäksi teemme joitain kehittyneitä juttuja, kuten luomme mukautetun kaksoisnapautusilmaisimen PanHandler API:n avulla. Opit linkittämään kirjaston Xcodessa ja antamaan sovelluksellesi pääsyn Camera Rolliin. Luomme myös ikioman komponentin ja paljon muuta. Kuulostaako mielenkiintoiselta? Nähdään seuraavassa osassa.

(da, ml, og, il)