React Native Tutorial – Az első iOS alkalmazásod építése JavaScript segítségével (1. rész)

A szerzőről

Nash Vail szenvedélye a felhasználói felületek tervezése. Jelenleg informatika szakos hallgató, és aktívan keresi a gyakornoki lehetőségeket. …További információNash↬

A mobilalkalmazások JavaScript segítségével történő építésének ötlete nem új. Láttunk már olyan keretrendszereket, mint az Ionic és a PhoneGap, amelyek felvállalták a kihívást, és bizonyos mértékig sikerült is elég nagy fejlesztői és közösségi támogatást szerezniük. A bemutató 2. részéhez.

Ezek a keretrendszerek és az egész ötlet, hogy mobilalkalmazásokat építsünk JavaScript segítségével, azonban soha nem vonzott engem. Mindig azt gondoltam, miért nem tanulom meg a Swift/Objective-C-t vagy a Javát, és építek igazi alkalmazásokat? Ez mindenképpen jelentős mennyiségű tanulást igényel, de nem ez az, amit mi fejlesztők csinálunk, és amiben jónak kell lennünk? Gyorsan megtanulni új nyelveket és keretrendszereket? Akkor mi értelme van? Számomra az előnyök sosem ellensúlyozták a kételyeket.

Míg el nem olvastam ezt a cikket a Chalk + Chisel-en, különösen a következő sort:

Pár hónappal később már elég magabiztos vagyok ahhoz, hogy azt mondjam, talán soha többé nem írok iOS alkalmazást Objective-C-ben vagy Swiftben.

Mi? Te most… komolyan beszélsz?

További olvasnivalók a SmashingMag-on:

• Miért érdemes megfontolni a React Native-ot a mobilalkalmazásodhoz
• Server-Side Rendering With React, Node And Express
• How To Scale React Applications
• Internationalizing React Apps

Egy ilyen merész állítást olvasva rávettem magam, hogy adjak egy esélyt a React Native-nak. Miért is ne? Már használtam a Reactot és imádtam. A React Native annyira hasonlít a Reactra (duh!), hogy ha már React fejlesztő vagy, akkor is otthonosan fogod érezni magad. Még ha nem is vagy az, a React szerencsére nagyon könnyen elsajátítható.

Mit fogunk építeni

Soha nem volt szerencsém megtalálni a tökéletes háttérképes alkalmazást az iPhone-omra az App store-ban. Az asztali számítógépen az Unsplash az egyablakos bolt az összes háttérképes igényemhez. A telefonon: Beállítások → Háttérkép 🙁

Szóval, ellentétben néhány más oktatóprogrammal, ahol számlálókat építesz és alig használod őket, ebben az oktatóprogramban együtt építünk magunknak egy olyan alkalmazást, amely véletlenszerű lenyűgöző háttérképeket húz az Unsplash-ről, esztétikusan megjeleníti őket, és lehetővé teszi, hogy az általad választott háttérképeket a Camera Rollba mentsd. Higgye el, én már azon kaptam magam, hogy többet használom ezt az alkalmazást, mint azt eredetileg gondoltam. Még ha ennek a bemutatónak a végére a React Native nem is nyűgöz le, akkor is egy igazán klassz háttérképes alkalmazással fogsz végezni. Hát nem nagyszerű?

Mielőtt elkezdenénk, íme néhány dolog, amit ismerned kell:

1. JavaScript
2. Néhány ES2015 funkció, nevezetesen az osztályok, a nyílfüggvények, a strukturálás és a sablonsztringek
3. Mac OS X Terminal
4. CSS (igen!)
5. React (opcionális)

Még egy dolog. Ahogy a cím is egyértelműen jelzi, ebben a tutorialban egy iOS alkalmazást fogunk építeni. Ami megköveteli, igen, még a React Native-nal is, hogy Mac-et használj. A React Native-tal biztosan lehet Android alkalmazásokat építeni Windowson és Linuxon, de iOS-eseket nem. Ezért innentől kezdve ez a bemutató feltételezi, hogy Mac OS X-et futtatsz.

Takeaways

A bemutató végére eléggé meg fogod ismerni a React Native-ot ahhoz, hogy azonnal elkezdhess saját alkalmazásokat írni. Áttekintjük egy projekt beállítását az Xcode-ban, a harmadik féltől származó modulok és komponensek telepítését, a könyvtárak összekapcsolását, a flexbox-szal való stilizálást, egy egyéni gesztushallgató létrehozását és még sok más dolgot.

Ha még nem használtál Reactot korábban, ez a bemutató szintén megismertet téged a Reacttal. A React az új, forró JS könyvtár, amelyben rengeteg lehetőség rejlik, és nem látom, hogy a közeljövőben bárhová is elmenne.

Ezt a bemutatót két részre osztottuk a könnyebbség kedvéért. Mindkét rész öt szakaszból áll. Minden szakaszban elérünk egy célt, amely egy lépéssel közelebb visz minket az alkalmazásunk befejezéséhez. Azt tanácsolom, hogy ha egyszer elkezdted, akkor az egész részt egy menetben fejezd be, mivel rövidek, és így megismerheted az egész koncepciót, amit megpróbálok bemutatni anélkül, hogy megszakadna az áramlásod.

A referenciádhoz az általunk épített alkalmazás végleges kódját ebben a GitHub repóban találod.

Egy üres React Native projekt beállítása

GYőződj meg róla, hogy telepítve van az Xcode 7.0 vagy magasabb verziója. ingyenesen letölthető az App Store-ból.

Valószínűleg (ha webfejlesztő vagy és ezt 2016-ban olvasod) már telepítve van a Node. De ha ez nem így van, menj előre és telepítsd a Node-ot is. Egy másik fontos eszköz, amire szükségünk lesz, az npm. A Node telepített npm-mel érkezik; ezt azonban frissítened kell, mivel elég gyakran frissül. Kövesse ezt a telepítési útmutatót.

Ez minden, amire szükségünk lesz. Most a terminálból futtassuk le a npm install -g react-native-cli. Ez globálisan telepíti a React Native-ot a rendszeredre.

Ha minden túlságosan újnak tűnik számodra, vagy csak egy kicsit elveszettnek érzed magad az egész telepítési folyamatban, a hivatalos kezdeti útmutató mindig ott van, hogy segítsen neked.

Keresd meg egy jó helyet a számítógépeden, ahol a projektet szeretnéd beállítani. Ha ott vagy, a terminálból futtasd a react-native init SplashWalls.

Ezzel le kell hívnod és telepítened kell az összes szükséges modult, és létre kell hoznod egy új mappát SplashWalls néven.

A React Native egyik nagyszerű tulajdonsága, hogy Android és iOS alkalmazásokat is írhatsz együtt, a JavaScript kód nagy része közös közöttük. Az újonnan létrehozott mappában két .js fájlt találunk: index.android.js és index.ios.js – a nevek maguktól értetődőek. Ha iOS-alkalmazást készítünk, akkor az index.ios.js-sel fogunk dolgozni; az index.android.js-sel Android-alkalmazás esetén; és mindkettővel, tudod, mindkét platform esetén.

Mivel iOS-alkalmazást építünk, a bemutató kedvéért és a tisztaság érdekében teljesen megszabadulunk az index.android.js és az android mappától. index.ios.js az a fájl, amivel dolgozni fogunk. Ez az a fájl, amely az alkalmazás indításakor először végrehajtódik.

Következő lépésként menjünk át az ios mappába, és indítsuk el a SplashWalls.xcodeproj fájlt.

Egy Xcode ablakot kell látnunk, mint az alábbiakban látható.

Figyeljünk a fenti képen látható figyelmeztetésre: “No matching provisioning profiles found”. Javítsuk ki ezt.

Először is, változtassuk meg a Bundle Identifier mező szövegét valami egyéni szövegre. Ügyelnie kell arra, hogy bármit is ír be, az kövesse a fordított DNS konvenciót, amelyben a szervezet tartományneve fordítva szerepel, és további azonosítókkal egészül ki. Ez a konvenció segít megkülönböztetni az alkalmazásodat a többitől az eszközön és az App Store-ban. Én a com.nashvail.me.tutorial.SplashWalls nevet fogom használni; egyszerűen helyettesítse a saját nevét az enyém helyett, ha úgy tűnik, nem tud valamit kitalálni.

A következő lépésben válassza ki a nevét a csapat legördülő listából.

Kattintson a Fix Issue-ra.

Ha már itt vagyunk, vegye észre a Deployment Info részt. Itt néhány alapértelmezett beállítás van alkalmazva.

Változtassuk meg a beállításokat a következők szerint:

Az alkalmazást csak portréra állítjuk, és az állapotsort is elrejtjük.

Lépjünk előre, és nyomjuk meg a Futtatás gombot az Xcode bal felső részén. Ezzel egy olyan terminálablakot indítunk el, mint amilyen az alábbiakban látható. A kezdeti átalakítás egy kis időt vesz igénybe.

Amint kész, a szimulátorban a következő kimenetet kell látnia:

És ezzel befejeztük a legelső szakaszunkat.

Háttérképadatok lekérése az API-ból

Ebben a szakaszban az Unsplash.it API-t fogjuk hívni, háttérképadatokat kérve. Mielőtt azonban belevágnánk az érdekes munkába, némi előkészítésre van szükség.

Switching To ES2015 Class Syntax

Az index.ios.js fájl megnyitásakor észrevehetjük, hogy néhány kezdeti kód már jelen van. Ez a kód felelős a szimulátorban megjelenő kimenetért (előző kép).

Az index.ios.js fájlban figyeljük meg a var SplashWalls = React.createClass({ … }) kódsort. Ezt fogjuk módosítani. Ehhez a bemutatóhoz az ES2015 class szintaxisát fogjuk használni.

Mi fejlesztők kíváncsi lelkek vagyunk. Tudom, hogy biztosan azt kérdezed: Miért? Miért váltunk a class szintaxisra?

Ez mind személyes preferencia kérdése. Korábban sokat programoztam objektumorientált nyelveken, és a class egyszerűen ismerősebbnek tűnik számomra. Ráadásul a class használatával a kódot is egy kicsit tisztábban tartod, mivel nem kell vesszőket tenned minden egyes metódusdeklaráció után.

A másik oldalon, ha a class-t választod, nem kapsz olyan funkciókat, mint az automatikus kötés vagy a isMounted metódushoz való hozzáférés, ami egyáltalán nem rossz dolog, mivel nem igazán fogod magad veszteségben találni, ha nem használod ezeket.

Bármelyik utat is választod, végül is egy osztályt hozol létre. Az én tanácsom a class használata lenne. Ez egy új funkció, és előbb-utóbb úgyis az ES2015-öt fogod használni. És ha ezt a bemutatót követed, akkor kénytelen leszel a class-t használni – nincs igazán más választásod!

Ha többet szeretnél megtudni erről, fontold meg a “React.Component vs React.createClass” elolvasását Naman Goel és Zach Silveira tollából.

Amikor elvégezted a szükséges változtatásokat, a kódblokknak most már a következőképpen kell kinéznie:

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

A Reacthez újonnan érkező emberek számára a return zárójelben lévő kód egy kicsit furcsának tűnhet, de ez nem rakétatudomány, csak a jó öreg XML-szerű szintaxis, az úgynevezett JSX. Bővebben itt olvashatsz róla.

A class előtti megvalósításhoz képest a var szintaxis eltűnt. Emellett az render: function(){… most már csak render(){….

Hé! De mi az a Component, amit kiterjesztesz? És jogosan kérdezed. Ha most futtatnád a projektet az Xcode-ban, hibaüzenetet kapnál, miszerint a Component nincs definiálva. Itt két dolgot tehetsz: lecseréled a Component-t React.Component-ra; vagy hozzáadsz egy új sort a (lentebb látható) blokkon belül a fájl tetején.

Ebben és a későbbi kódpéldákban az újonnan hozzáadott sorokat //-vel veszem körül, hogy könnyebben össze tudd hasonlítani az általad írt kódot az itt láthatóval. Csak arra ügyelj, hogy ha kódot másolsz a mintákból, akkor ne a //-et másold a tényleges kóddal együtt. Mivel a JSX nem támogatja a /***/ megjegyzéseket, az alkalmazás összeomlásához vezet, ha ezeket beilleszted a JSX kódodba.

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

A fenti kódblokk csupán néhány billentyűleütést takarít meg. Ha például nem vennéd fel ezeket a kódsorokat a tetejére, akkor a AppRegistry helyett React.AppRegistry-t kellene írnod minden alkalommal, amikor ezt szeretnéd megtenni. Elég király! Ugye? Oké, nem annyira.

Menj vissza az Xcode-ba, és futtasd le a projektet még egyszer, hogy megbizonyosodj róla, hogy nem törtél el semmit a folyamat során.

Minden rendben? Nagyszerű! Lépjünk tovább.

A SplashWalls osztályon belül az első dolog, amit tennünk kell, az egy konstruktor hozzáadása. A konstruktoron belül inicializáljuk az állapotváltozóinkat. Az egyetlen két állapotváltozó, amire ezen a ponton szükségünk lesz, az egy tömb – wallsJSON – ami az API-ból lehívott összes JSON adatot fogja tárolni, és a isLoading, ami egy Boolean változó, ami azt jelenti, hogy egy true vagy false értéket fog tartani. Ennek az állapotváltozónak a megléte segíteni fog nekünk abban, hogy megjelenítsük és elrejtsük a betöltési képernyőt attól függően, hogy az adatok betöltésre kerültek-e vagy sem.

A SplashWalls osztályon belül adjuk hozzá a constructor-t az alábbiakban látható módon.

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

A következőkben definiálunk egy fetchWallsJSON metódust, amely, nos, azt teszi, amit mond. Hagyjunk pár sort a konstruktor záró zárójel alatt, és adjuk hozzá a következő kódsorokat:

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

Azt szeretnénk, hogy ez a függvény akkor lépjen működésbe, ha a komponensünk sikeresen fel lett szerelve. Adjuk hozzá a componentDidMount metódust. A legtöbb leírt metódus a SplashWalls osztályon belülre kerül – nem felejtem el megemlíteni, mikor nem.

componentDidMount egy életciklus metódus, amely az első renderelés után azonnal elsül.

Itt egy jó magyarázat a React komponens összes életciklus metódusáról. Csak ne feledjük, hogy mivel az újabb class szintaxist használjuk, kihagyhatjuk a getInitialState metódust. Ezt egy this.state változó deklarációval helyettesítjük a constructor-ban.

A metódusokat az osztályon belül érdemes tisztán rendszerezni. Én szeretem az összes egyéni metódust elkülöníteni az életciklus metódusoktól. Neked is ezt kellene tenned.

Deklaráljuk a componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Figyeljük meg, hogy a fetchWallsJSON metóduson belül bejelentkeztettünk egy üzenetet a konzolra – de hol van a konzol? Tartsunk ki.

Vigyázzunk, hogy a szimulátor ablak legyen kijelölve, és nyomjuk le a Cmd + Control + Z billentyűkombinációt, majd a megjelenő menüből válasszuk a Debug in Chrome menüpontot. Ez megnyit egy új lapot. Miközben ugyanabban a fülben vagy, menj át a Dev Tools-ra (Option + Cmd + J). A konzolon a “Wallpapers will be fetched” üzenetet találja.”

Maradjon egyelőre nyitva a debugger. Látogasson el az unsplash.it/listára egy új lapon. Látnia kell, hogy a teljes nézetablak megtelik egy JSON tömbtel. A tömb minden eleme egy JavaScript-objektum, amely egyetlen háttérkép adatait tartalmazza. Ezeken az adatokon fogunk átszűrni, és véletlenszerű háttérképeket ragadunk ki belőlük.

Először is tegyük meg, hogy a fetchWallsJSON ne csak egy üzenetet logoljon a konzolra.

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

Frissítsük újra a szimulátort (Cmd + R), vagy jobb, ha engedélyezzük az élő újratöltést a Cmd + Ctrl + Z billentyűkombinációval és az Enable live reload (Élő újratöltés engedélyezése) menüpont kiválasztásával. Az élő újratöltés engedélyezésével nem kell minden alkalommal frissítenie a szimulátort, amikor változtat a kódján. Csak mentse el az IDE-ben, és a szimulátor automatikusan frissül. Ha valaha is fejlesztettél már alkalmazást az Xcode vagy az Android Studio programban, akkor ezt a funkciót különösen lenyűgözőnek fogod találni, mivel nem kell minden egyes változtatásnál megnyomnod a Futtatás gombot és újrafordítanod az alkalmazást. Ezek az apróságok sokkal vonzóbbá teszik a React Native-ot.

A frissítéskor, néhány másodperc várakozás után a következő kimenetet kell látnunk a konzolon:

Jó, most már képesek vagyunk lekérni a háttérképek JSON-adatait az API-ból. Mint észrevehetted, van egy kis késleltetés, mielőtt az adatok naplózódnak a konzolra. Ez azért van, mert a háttérben az adatok letöltődnek a szerverekről, ami időbe telik.

Ez tökéletes alkalomnak tűnik egy betöltőképernyő hozzáadására.

Betöltőképernyő hozzáadása

A szakasz végére megjelenik egy betöltőképernyő, miközben a JSON adatok letöltése zajlik.

Először is szabaduljunk meg mindentől a SplashWall osztály render metódusán belülről, és adjuk hozzá ezeket a kódsorokat:

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

Két új metódusunk van. Deklaráljuk őket is, ha már itt tartunk

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

Attól függően, hogy a isLoading állapotváltozó milyen értéket tartalmaz, két különböző View komponens fog megjeleníteni. Ha isLoading igaz, akkor egy betöltő spinnert jelenítünk meg, amelyet a “Contacting Unsplash” szöveg követ; ha isLoading hamis (ami azt jelenti, hogy az adatok betöltődtek), akkor az eredményeket jelenítjük meg, ami jelen pillanatban csak egy Text komponens, amely azt mondja: “Data loaded”.

De itt valamit kihagyunk: nem változtatjuk meg a isLoading értékét, miután az adataink letöltődtek. Pontosan ezt tegyük meg. Menjünk át a fetchWallsJSON metódushoz, és a jsonData-t a konzolra naplózó sor alatt adjunk hozzá egy extra sort, hogy frissítsük a isLoading-t.

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

A setState a React komponens API egyik metódusa. Ez az elsődleges módszer a felhasználói felület frissítésének kiváltására.

Megjegyezzük, hogy a renderLoadingMessage-ban van egy új komponensünk: ActivityIndicatorIOS (egyszerűen fogalmazva, a pörgettyű). Ezt a komponenst importálnunk kell, mielőtt használni tudjuk. Emlékszel, amikor a Component importálásakor megspóroltunk néhány billentyűleütést? Pontosan ezt kell tennünk.

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

Még egy dolgot meg kell tennünk, mielőtt láthatnánk az eredményeket. Vegyük észre, hogy a ActivityIndicatorIOS-ot tartalmazó View stílusa styles.loadingContainer-re van állítva. Ezt meg kell határoznunk. Keressük meg a var styles = StyleSheet.create({… feliratú sort. Itt látni fogod, hogy már van néhány stílus definiálva. Ezek a stílusok felelősek a kezdeti “Welcome to React Native” üzenet stílusáért a szimulátorban. Szabaduljunk meg az összes előre definiált stílustól, és csak egyet adjunk hozzá a loadingContainer-hoz, ahogy a képen látható.

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

A React Native-ban a komponensekre alkalmazott összes stílus a fent látható módon van deklarálva. A StyleSheet.create egy stílusokat tartalmazó JavaScript objektumot vesz fel argumentumként, majd a stílusok a dot operátorral érhetők el. Például a következő módon alkalmaztuk a stílust a View wrapperre:

<View style={styles.loadingContainer}/>

A stílusokat inline is deklarálhatjuk:

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

Ez azonban kissé rendezetlenné teszi a kódunkat. Ha egy komponensre több stílust alkalmazunk, mindig jó ötlet ezeket egy változóban tárolni.

A stílusok nagyon hasonlítanak a CSS-re, nem igaz? Tudod miért? Mert annak kell lenniük – nem különböznek semmiben. Ez még egyszerűbbé teszi a React Native-ot a webfejlesztők számára. Amikor egy dedikált IDE-ben (például az Xcode-ban) építesz egy alkalmazást, egy StoryBoardot kapsz, hogy közvetlenül a képernyőre húzd és pozicionáld az UI-elemeket, például a gombokat és a címkéket. A React Native-ban ezt nem teheti meg, ami – higgye el – egyáltalán nem rossz dolog.

A React Native erősen használja a flexboxot az elemek képernyőn való elhelyezéséhez. Ha már ismered a flexboxot, az elemek pozicionálása gyerekjáték. Én minden nap előnyben részesítem a flexbox elrendezést a StoryBoarddal szemben, pont. Ez csak egy olyan dolog, amit magadnak kell kipróbálnod, hogy meg tudd állapítani a különbséget.

Mentsd el a változtatásokat, menj át a szimulátorba, és nyomd meg a Cmd + R billentyűt. Meg kell látnod a betöltési képernyőt.

Pár másodperc múlva meg kell látnod a képernyőt, amelyen az áll: “Data loaded”.

Szűrés és véletlenszerű háttérképek kiválasztása

Ebben a részben a háttérképadatokon fogunk szűrni, és meghatározott számú véletlenszerű háttérképet fogunk kiválasztani.

Ez a rész inkább a JavaScriptre, mint a React Native-ra fog koncentrálni. Végigmegyünk egy új modul (fájl) létrehozásán, amely a véletlen számok generálását fogja kezelni. Ha a modulok JavaScriptben újnak hangzanak számodra, fontold meg, hogy átnézed a Node.js modules docs-t.

Menj a class deklaráció feletti sorba, és deklarálj egy új konstanst, amely megmondja az alkalmazásnak, hogy hány véletlen háttérképet válasszon; legyen öt.

const NUM_WALLPAPERS = 5;

Most létrehozunk egy modult, amely segíteni fog nekünk a véletlen számok generálásában. Ez a modul két függvényt fog exportálni. Nézzük meg mindegyiket.

• uniqueRandomNumbers: Ez a függvény három argumentumot vesz fel. Az első a visszaadandó véletlenszámok száma. A következő két argumentum meghatározza azt a tartományt, amelyben a véletlen számokat vissza kell adni, nevezetesen lowerLimit és upperLimit. Ha a uniqueRandomNumbers(5, 10, 20) függvényt hívja meg, akkor egy 10 és 20 közötti öt egyedi véletlen számból álló tömböt kap vissza.
• randomNumberInRange: Ez a függvény két argumentumot vesz fel, amelyek meghatározzák az alsó és a felső határt, amelyek között egyetlen véletlen számot ad vissza. Ha például a randomNumberInRange(2, 10) függvényt hívjuk, akkor egy 2 és 10 közötti egyedi véletlenszámot kapunk vissza.

Ezeket a két függvényeket összevonhattuk volna egybe, de mivel én a jó minőségű kód hirdetője vagyok, az egyetlen felelősség elvét követem. Az SRP többé-kevésbé azt mondja ki, hogy minden függvénynek egy dolgot kell jól csinálnia, és semmi mást nem szabad csinálnia. A jó programozási elvek követése számos későbbi fejfájástól kíméli meg az embert.

Készítsen egy új fájlt ugyanabban a könyvtárban, mint az index.ios.js. Ha akarnánk, ezeket a függvényeket az index.ios.js-be is elhelyezhetnénk, de gondoljunk csak bele: ahhoz a fajta célhoz, amit ez az új fájl szolgál, egyszerűen bemásolhatjuk ezt a fájlt, és beilleszthetjük bármelyik új projektünkbe, amely véletlen számok generálását igényli, és onnan használhatjuk. Emellett így az index.ios.js állományon belüli kód is sokkal tisztább marad.

Nevezzük el a fájlt RandManager.js-nek. Az alábbiakban látható a tartalma:

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

Ne felejtsük el megkövetelni a RandManager modult az index.ios.js-ben. Csak add hozzá: var RandManager = require('./RandManager.js'); a use strict; utasítás alá. Miután a RandManager készen áll, a következő változtatásokat végezzük el a fetchWallsJSON függvényünkön:

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

Mihelyt megvan a jsonData, egyedi véletlen számokat kérünk le a RandManager-ből és tároljuk a randomIds tömbben. Ezután ciklusban végigmegyünk ezen a tömbön, felvesszük az adott randomId-nál jelenlévő háttérképes adatobjektumokat, és a walls tömbben tároljuk őket.

Ezután frissítjük az állapotváltozóinkat: isLoading false-ra, mivel az adatok letöltése megtörtént; és wallsJSON walls-ra.

Az eredmények megtekintéséhez módosítsuk a renderResults függvényt, hogy a következőre hasonlítson:

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

A legelső sorban a renderResults belsejében egy új ES2015 funkciót használunk, amit destructuring-nek hívunk. A destructuring segítségével sikerült helyettesíteni:

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

azzal:

var {wallsJSON, isLoading} = this.state;

ES2015 elég király, én mondom neked.

Ezután a View-en belül a map segítségével végighaladunk a lekért wallsJSON adatokon. Amikor a JSX-ben egy gyűjteményen akarsz végighaladni, akkor a map konstrukciót használod.

Azt is, amikor egy tömbön vagy gyűjteményen végighaladsz és egy komponenst renderelsz, a React Native megköveteli, hogy adj egy key, egy egyedi azonosítót minden egyes renderelt gyermekkomponensnek. Ezért látható egy kulcs tulajdonság a

<Text key={index}>

A szimulátor frissítése után…

Öt különböző véletlenszerű háttérkép-azonosítót látunk megjelenítve. Változtassuk meg a {wallpaper.id}-t {wallpaper.author}-ra a renderResults-ban, és valami olyasmit kell látnunk, mint a következő.

Nagyszerű! Most már beszélhetünk. Most már képesek vagyunk a megadott számú (jelen esetben öt) véletlenszerű háttérképet lekérni és szűrni az API-ból. Úgy tűnik, ezzel a résszel végeztünk. High five!

A Swiper komponens hozzáadása

Ebben a szakaszban egy Swiper komponenst fogunk beépíteni az alkalmazásunkba. Ez a komponens lehetővé teszi számunkra, hogy háttérképeket jelenítsünk meg egy lehúzható konténerben.

Megtanuljuk, hogyan illesszünk be egy harmadik féltől származó React Native komponenst az alkalmazásunkba. A React Native elképesztő közösségi támogatással rendelkezik, és a GitHubon gazdag gyűjteménye van mindenféle különböző harmadik féltől származó komponenseknek.

Céljainkra a react-native-swiper-t fogjuk használni.

Lépjünk a terminálban a projekt könyvtárába, és futtassuk a következő parancsot:

npm install react-native-swiper --save

Most igényeljük a Swiper komponenst: adjunk hozzá var Swiper = require('react-native-swiper'); a use strict alá.

Próbáljuk ki az újonnan bevont Swiper komponensünket.

Menjünk a renderResults módszerhez, és cseréljük le a View-et Swiper-ra. Ezt követően a renderResults-nak így kell kinéznie:

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

Ezzel a következő eredményt kapjuk:

Ahelyett, hogy a szerzők neveit listaként jelenítenénk meg, egy swiperben helyeztük el őket, amely minden háttérképnek egy saját képernyőt ad, amelyen átlapozhatunk. Itt még néhány dolgot meg kell tennünk: a Swiper komponenshez a következő attribútumokat adjuk hozzá a képen látható módon.

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

Ezzel:

• Stílusosítja a lapozási pontokat (az előző képen alul látható kék pontokat fehérré és nagyobbá teszi).
• Kikapcsolja a folyamatos lapozgatást (loop={false}). Azaz, ha elérjük az utolsó oldalt, és tovább lapozunk, nem kerülünk vissza az első háttérképre.
• Mindig elsüti a onMomentumScrollEnd (amivel a bemutató következő részében mélyebben foglalkozunk), amikor befejezzük a lapozást.

Ezzel az első rész végére értünk. Micsoda utazás!

A React Native bemutató összefoglalása

• Az első részben megtanultuk, hogyan kell létrehozni egy üres React Native projektet az Xcode-ban.
• A második részben az ES2015 osztályokról beszéltünk, és arról, hogy miért érdemes az újabb szintaxist előnyben részesíteni, valamint az állapotváltozók létrehozásáról és a nyers adatok lekéréséről az API-ból.
• A harmadik részben az alkalmazás dinamikus megjelenítését tekintettük át az állapotváltozó értéke alapján. Emellett végeztünk némi könnyű flexbox pozicionálást is.
• A negyedik szakaszban létrehoztunk egy vadonatúj modult a véletlenszám-generálás kezelésére, és átnéztük a főfájlba való beépítését is.
• Az utolsó szakaszban hozzáadtuk az első harmadik féltől származó komponenst az alkalmazásunkhoz, ami a Node-nak köszönhetően gyerekjáték volt.

Előtte, hogy őszinte legyek, az alkalmazásunk nem néz ki túl különlegesen. Tudom. A következő részben tényleges képeket fogunk hozzáadni a szerzők nevei helyett. Nem csak ezt, hanem néhány haladó dolgot is fogunk csinálni, mint például egy egyéni dupla érintés érzékelő létrehozását a PanHandler API segítségével. Megtanulod, hogyan köss össze egy könyvtárat az Xcode-ban, és hogyan adj hozzáférést az alkalmazásodnak a Camera Rollhoz. Létrehozzuk a saját komponensünket is, és még sok minden mást. Érdekesen hangzik? Találkozunk a következő részben.

(da, ml, og, il)