React Native Tutorial – Vytvoření první aplikace pro iOS pomocí JavaScriptu (1. část)

O autorovi

Nash Vail se věnuje navrhování uživatelských rozhraní. V současné době je studentem informatiky a aktivně hledá možnosti stáží. …Více oNash↬

Myšlenka vytvářet mobilní aplikace pomocí JavaScriptu není nová. Viděli jsme, jak se této výzvy chopily frameworky jako Ionic a PhoneGap, a do jisté míry se jim podařilo získat slušnou podporu vývojářů a komunity. K druhé části výukového kurzu.

Tyto frameworky a celá myšlenka budování mobilních aplikací pomocí JavaScriptu mě však nikdy nelákaly. Vždycky jsem si říkal, proč se prostě nenaučit Swift/Objective-C nebo Javu a vytvářet skutečné aplikace? To určitě vyžaduje značné množství učení, ale není to to, co my vývojáři děláme a v čem bychom měli být dobří? Rychle se naučit nové jazyky a frameworky? Jaký to má potom smysl? Pro mě výhody nikdy nepřevážily nad pochybnostmi.

Dokud jsem si nepřečetl tento článek z Chalk + Chisel, zejména následující řádek:

Překročil jsem o pár měsíců a jsem si dostatečně jistý, abych mohl říct, že už možná nikdy nenapíšu aplikaci pro iOS v Objective-C nebo Swiftu.

Cože? To jako… myslíš vážně?

Další čtení na SmashingMagu:

• Proč byste měli pro svou mobilní aplikaci zvážit React Native
• Renderování na straně serveru pomocí Reactu, Node a Express
• Jak škálovat aplikace React
• Internacionalizace aplikací React

Přečtení tak odvážného tvrzení mě přimělo k tomu, abych React Native vyzkoušel. Proč ne? Už jsem React používal a líbil se mi. React Native je natolik podobný Reactu (duh!), že se v něm budete cítit jako doma, pokud jste již vývojáři Reactu. I když nejste, React naštěstí bývá velmi snadný na pochopení.

Co budeme vytvářet

Nikdy jsem neměl štěstí, abych v App Store našel ideální aplikaci na tapety pro svůj iPhone. Na stolním počítači je Unsplash jediným místem pro všechny mé potřeby v oblasti tapet. V telefonu: V tomto návodu si společně vytvoříme aplikaci, která bude tahat náhodné úžasné tapety z Unsplash, zobrazovat je estetickým způsobem a umožní vám ukládat vybrané tapety do Camera Roll. Věřte mi, že jsem zjistil, že tuto aplikaci používám častěji, než jsem si původně myslel. I když vás na konci tohoto návodu React Native neohromí, stejně nakonec budete mít opravdu skvělou aplikaci na tapety. Není to skvělé?“

Než začneme, měli byste se seznámit s některými věcmi:

1. JavaScript
2. Některé funkce ES2015, konkrétně třídy, šipkové funkce, destrukce a šablonové řetězce
3. Mac OS X Terminal
4. CSS (ano!)
5. React (volitelné)

Ještě jedna věc. Jak je v názvu jasně uvedeno, v tomto tutoriálu budeme vytvářet aplikaci pro iOS. Což vyžaduje, ano, i v případě React Native, abyste pracovali na počítači Mac. S React Native určitě můžete vytvářet aplikace pro Android ve Windows a Linuxu, ale ne pro iOS. Proto od této chvíle tento tutoriál předpokládá, že používáte Mac OS X.

Výstupy

Na konci tohoto tutoriálu se s React Native seznámíte natolik, že můžete hned začít psát vlastní aplikace. Probereme nastavení projektu v Xcode, instalaci modulů a komponent třetích stran, propojení knihoven, stylování pomocí flexboxu, vytvoření vlastního posluchače gest a mnoho dalších věcí.

Pokud jste React ještě nepoužívali, tento tutoriál vás také seznámí s Reactem. React je nová horká JS knihovna s velkým potenciálem a nevidím, že by se v blízké budoucnosti někam posunula.

Tento tutoriál byl pro vaše pohodlí rozdělen do dvou částí. Každá část má pět částí. V každé části splníme cíl, který nás posune o krok blíže k dokončení naší aplikace. Doporučuji, abyste po začátku dokončili celou danou sekci najednou, protože jsou krátké, a tak se seznámíte s celým konceptem, který se vám snažím představit, aniž byste přerušili svůj tok.

Pro vaši informaci, finální kód aplikace, kterou vytváříme, najdete v tomto repozitáři GitHub.

Nastavení prázdného projektu React Native

Ujistěte se, že máte nainstalovaný Xcode 7.0 nebo vyšší. lze jej zdarma stáhnout z App Store.

Je pravděpodobné (pokud jste webový vývojář a čtete tento článek v roce 2016), že již máte nainstalovaný Node. Pokud tomu tak ale není, klidně si Node nainstalujte také. Dalším důležitým nástrojem, který budeme potřebovat, je npm. Node se dodává s nainstalovaným npm; budete ho však muset aktualizovat, protože se poměrně často aktualizuje. Postupujte podle tohoto návodu k instalaci.

To je vše, co budeme potřebovat. Nyní z terminálu spusťte npm install -g react-native-cli. Tím se React Native globálně nainstaluje do vašeho systému.

Pokud se vám zdá všechno příliš nové, nebo se v celém procesu instalace jen trochu ztrácíte, vždy vám pomůže oficiální průvodce začátky.

Najděte si v počítači vhodné místo, kde byste chtěli projekt nastavit. Jakmile se tam dostanete, spusťte z terminálu příkaz react-native init SplashWalls.

To by mělo načíst a nainstalovat všechny potřebné moduly a vytvořit novou složku s názvem SplashWalls.

Jednou ze skvělých věcí na React Native je, že můžete psát aplikace pro Android i iOS společně, přičemž většina kódu JavaScriptu je mezi nimi společná. Uvnitř nově vytvořené složky najdete dva soubory .js: index.android.js a index.ios.js – názvy jsou samozřejmé. Pokud vytváříte aplikaci pro systém iOS, budete pracovat se souborem index.ios.js; v případě aplikace pro systém Android se souborem index.android.js; a v případě, znáte to, obou platforem s oběma.

Protože vytváříme aplikaci pro systém iOS, pro účely tohoto návodu a pro zachování čistoty se zbavíme souboru index.android.js a složky android úplně. index.ios.js je soubor, se kterým budeme pracovat. Je to soubor, který se jako první spustí při spuštění aplikace.

Dále přejděte do složky ios a spusťte soubor SplashWalls.xcodeproj.

Mělo by se vám zobrazit okno Xcode jako na obrázku níže.

Všimněte si varování na obrázku výše, které říká „Nebyly nalezeny žádné odpovídající profily provisioningu“. Pojďme to opravit.

Nejprve změňte text v poli Bundle Identifier na něco vlastního. Musíte se ujistit, že cokoli zadáte, dodržuje konvenci reverzního DNS, ve které je název domény vaší organizace obrácený a doplněný o další identifikátory. Tato konvence pomáhá odlišit vaši aplikaci od ostatních v zařízení a v App Store. Já použiji com.nashvail.me.tutorial.SplashWalls; pokud se vám nezdá, že byste mohli něco vymyslet, jednoduše nahraďte svůj název místo mého.

Dále vyberte svůj název z rozbalovacího seznamu týmu.

Klikněte na Fix Issue.

Když už jsme u toho, všimněte si části Deployment Info. Jsou v ní použita některá výchozí nastavení.

Změňte nastavení tak, aby odpovídalo následujícímu:

Uděláme aplikaci pouze na výšku a skryjeme také stavový řádek.

Pokračujte a stiskněte tlačítko Spustit vlevo nahoře v aplikaci Xcode. Tím spustíte okno terminálu, jako je to na obrázku níže. Počáteční transformace chvíli trvá.

Po dokončení byste měli v simulátoru vidět následující výstup:

A tím jsme dokončili naši úplně první část.

Získání dat tapety z rozhraní API

V této části budeme volat rozhraní API služby Unsplash.it s žádostí o data tapety. Než se však pustíme do zajímavé práce, je třeba provést nějaké nastavení.

Přepnutí na syntaxi třídy ES2015

Po otevření souboru index.ios.js si všimnete, že je zde již přítomen počáteční kód. Jedná se o kód zodpovědný za výstup v simulátoru (předchozí obrázek).

Uvnitř souboru index.ios.js si všimněte řádku kódu s nápisem var SplashWalls = React.createClass({ … }). Ten se chystáme upravit. Pro tento tutoriál použijeme syntaxi class v ES2015.

My vývojáři jsme zvědavé duše. Vím, že se jistě ptáte: Proč? Proč přecházet na syntaxi class?“

Všechno se odvíjí od osobních preferencí. Dříve jsem hojně programoval v objektově orientovaných jazycích a class mi prostě připadá důvěrnější. Navíc použitím class se také rozhodnete udržovat kód o něco čistší, protože nemusíte přidávat čárky za každou deklaraci metody.

Na druhou stranu, když se rozhodnete pro class, nezískáte funkce, jako je automatická vazba nebo přístup k metodě isMounted, což není vůbec špatně, protože se opravdu neocitnete ve ztrátě, když je nebudete používat.

Ať už se rozhodnete jakkoli, přece jen vytváříte třídu. Moje rada by byla použít class. Je to nová funkce a dříve nebo později zjistíte, že používáte ES2015. A pokud budete postupovat podle tohoto návodu, budete muset použít class – nemáte vlastně na výběr!“

Pro více informací o této problematice zvažte přečtení knihy „React.Component vs React.createClass“ od Namana Goela a Zacha Silveiry.

Poté, co jste provedli potřebné změny, by blok kódu měl nyní vypadat tak, jak je uvedeno na obrázku:

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

Pro lidi, kteří s Reactem teprve začínají, se kód uvnitř return parén může zdát trochu ujetý, ale není to žádná raketová věda, jen stará dobrá syntaxe podobná XML zvaná JSX. Více se o ní dočtete zde.

V porovnání s implementací před class je syntaxe var pryč. Také render: function(){… je nyní jen render(){….

Hej! Ale co je to Component, které rozšiřujete? A správně se ptáte. Kdybyste nyní projekt spustili v Xcode, zobrazilo by se chybové hlášení, že Component není definováno. Můžete zde udělat dvě věci: nahradit Component za React.Component; nebo přidat nový řádek uvnitř bloku (zobrazeného níže) v horní části souboru.

V tomto a pozdějších příkladech kódu obklopuji nově přidané řádky //, aby pro vás bylo snazší porovnat kód, který píšete, s tím, co je zde zobrazeno. Jen si dejte pozor, abyste při kopírování kódu z ukázek nakonec nezkopírovali // spolu se skutečným kódem. Protože JSX nepodporuje komentáře /***/, skončí to pádem aplikace, pokud byste je do kódu JSX zahrnuli.

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

Všechno, co výše uvedený blok kódu udělá, je, že vám ušetří pár stisků kláves. Pokud byste například tyto řádky kódu nahoře nezařadili, museli byste pokaždé, když byste to chtěli udělat, napsat React.AppRegistry místo pouhého AppRegistry. Pěkná frajeřina! Že ano? Dobře, tak moc ne.

Přejděte zpět do Xcode a spusťte projekt ještě jednou, abyste se ujistili, že jste při tom nic nepoškodili.

Vše v pořádku? Skvěle! Pojďme dál.

Uvnitř třídy SplashWalls musíme nejprve přidat konstruktor. Uvnitř konstruktoru budeme inicializovat naše stavové proměnné. Jediné dvě stavové proměnné, které budeme v tuto chvíli potřebovat, jsou pole – wallsJSON – které bude uchovávat všechna data JSON získaná z rozhraní API, a isLoading, což je logická proměnná, což znamená, že bude mít hodnotu true nebo false. Mít tuto stavovou proměnnou nám pomůže zobrazit a skrýt načítací obrazovku v závislosti na tom, zda byla data načtena, nebo ne.

Vnitř třídy SplashWalls přidáme constructor, jak je znázorněno níže.

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

Dále budeme definovat metodu fetchWallsJSON, která, no, dělá to, co říká. Ponechte pár řádků pod uzavírací závorkou konstruktoru a přidejte následující řádky kódu:

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

Chceme, aby se tato funkce spustila, jakmile bude naše komponenta úspěšně připojena. Přidejte metodu componentDidMount. Většina popsaných metod se nachází uvnitř třídy SplashWalls – nezapomenu zmínit, kdy tomu tak není.

componentDidMount je metoda životního cyklu, která se vyvolá ihned poté, co dojde k prvnímu vykreslení.

Tady je dobré vysvětlení všech metod životního cyklu komponenty React. Jen nezapomeňte, že jelikož používáme novější syntaxi class, můžeme metodu getInitialState vynechat. Nahradí ji deklarace proměnné this.state v constructor.

Je dobré uspořádat metody uvnitř třídy přehledně. Rád bych všechny vlastní metody oddělil od metod životního cyklu. Vy byste měli také.

Deklarujme componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Všimněte si, že uvnitř metody fetchWallsJSON jsme zapsali zprávu do konzoly – ale kde je konzola? Držte se pevně.

Ujistěte se, že máte vybrané okno simulátoru a stiskněte Cmd + Control + Z. Z nabídky, která se objeví, vyberte Debug in Chrome. Tím se otevře nová karta. Na stejné kartě přejděte na Dev Tools (Option + Cmd + J). V konzole najdete zprávu „Wallpapers will be fetched“ (Tapety budou načteny).

Prozatím nechte debugger otevřený. Navštivte stránku unsplash.it/list na nové kartě. Měli byste vidět celou plochu zobrazení vyplněnou polem JSON. Každý prvek pole je objekt JavaScriptu obsahující data pro jednu tapetu. Tato data budeme filtrovat a vybírat z nich náhodné tapety.

Nejprve přimějeme fetchWallsJSON, aby dělal něco víc než jen zaznamenával zprávu do konzoly.

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

Obnovte simulátor (Cmd + R) nebo, lépe řečeno, zapněte živé načítání stisknutím Cmd + Ctrl + Z a výběrem možnosti Enable live reload. Povolením živého načítání nemusíte obnovovat simulátor při každé změně kódu. Stačí uložit v IDE a simulátor se automaticky obnoví. Pokud jste již někdy vyvíjeli aplikaci v Xcode nebo Android Studiu, bude pro vás tato funkce obzvlášť úžasná, protože nemusíte při každé změně stisknout tlačítko Spustit a aplikaci znovu zkompilovat. Díky těmto drobnostem je React Native mnohem přitažlivější.

Po obnovení byste po několika sekundách čekání měli v konzoli vidět následující výstup:

Dobře, nyní jsme schopni načíst data JSON tapet z rozhraní API. Jak jste si mohli všimnout, je zde malá prodleva, než se data zapíší do konzoly. Je to proto, že na pozadí probíhá stahování dat ze serverů, což nějakou dobu trvá.

Vypadá to, že je ideální čas přidat načítací obrazovku.

Přidání načítací obrazovky

Na konci této části se nám během stahování dat JSON zobrazí načítací obrazovka.

Nejprve se zbavíme všeho uvnitř metody SplashWall třídy render a přidáme tyto řádky kódu:

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

Máme dvě nové metody. Když už jsme v tom, tak je také deklarujme

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

V závislosti na tom, jakou hodnotu má stavová proměnná isLoading, budou vykresleny dvě různé komponenty View. Pokud má isLoading hodnotu true, zobrazíme načítací spinner následovaný textem „Kontaktování Unsplash“; pokud má isLoading hodnotu false (což znamená, že data byla načtena), zobrazíme výsledek, což je od této chvíle pouze komponenta Text s nápisem „Data načtena“.

Něco nám tu ale chybí: po načtení našich dat hodnotu isLoading nezměníme. Udělejme právě to. Přejděte k metodě fetchWallsJSON a pod řádek, který zaznamenává jsonData do konzoly, přidejte jeden řádek navíc, abyste aktualizovali 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 je jednou z metod rozhraní React Component API. Je to primární metoda používaná ke spouštění aktualizací uživatelského rozhraní.

Všimněte si, že v renderLoadingMessage máme novou komponentu: ActivityIndicatorIOS (zjednodušeně řečeno spinner). Tuto komponentu musíme importovat, abychom ji mohli používat. Pamatujete si, když jsme importovali Component, kde jsme si ušetřili několik stisků kláves? Právě to budeme muset udělat.

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

Než se podíváme na výsledky, musíme udělat ještě jednu věc. Všimněte si, že View obsahující ActivityIndicatorIOS má nastaven styl na styles.loadingContainer. Ten budeme muset definovat. Najděte řádek, na kterém je napsáno var styles = StyleSheet.create({…. Zde uvidíte, že jsou již definovány některé styly. Tyto styly jsou zodpovědné za stylování úvodní zprávy „Welcome to React Native“ v simulátoru. Zbavte se všech předdefinovaných stylů a přidejte pouze jeden pro loadingContainer, jak je uvedeno na obrázku.

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

Všechny styly, které se v React Native používají na komponenty, se deklarují výše uvedeným způsobem. StyleSheet.create přijímá jako argument objekt JavaScriptu obsahující styly a poté lze ke stylům přistupovat pomocí operátoru dot. Podobně jako jsme aplikovali styl na wrapper View následujícím způsobem:

<View style={styles.loadingContainer}/>

Styly můžete deklarovat také inline:

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

To však náš kód trochu znepřehledňuje. Pokud na komponentu aplikujete více stylů, je vždy dobré je uložit do proměnné.

Styly vypadají hodně podobně jako CSS, že? Víte proč? Protože tak mají vypadat – nijak se neliší. Díky tomu si React Native mohou weboví vývojáři ještě snadněji osvojit. Když vytváříte aplikaci ve specializovaném vývojovém prostředí (například Xcode), máte k dispozici StoryBoard, na který můžete přímo přetahovat a umisťovat prvky uživatelského rozhraní, jako jsou tlačítka a popisky, na obrazovku. To v React Native udělat nemůžete, což – věřte mi – není vůbec špatně.

React Native k umístění prvků na obrazovce hojně využívá flexbox. Jakmile se s flexboxem sžijete, bude pro vás pozicování prvků hračkou. Každým dnem dám přednost rozvržení flexbox před tabulkou StoryBoard, tečka. Je to prostě jedna z těch věcí, které si musíte sami vyzkoušet, abyste poznali rozdíl.

Uložení změn, přejděte do simulátoru a stiskněte Cmd + R. Měli byste vidět načítací obrazovku.

Po několika sekundách byste měli vidět obrazovku s nápisem „Data načtena“.

Filtrování a výběr náhodných tapet

V této části budeme filtrovat data tapet a vybírat zadaný počet náhodných tapet.

Tato část bude zaměřena více na JavaScript než na React Native. Projdeme vytvoření nového modulu (souboru), který bude zpracovávat generování náhodných čísel. Pokud vám moduly v JavaScriptu připadají nové, zvažte, zda si neprojdete dokumentaci k modulům Node.js.

Přejděte na řádek nad deklarací class a deklarujte novou konstantu, která bude aplikaci říkat počet náhodných tapet, které má vybrat; nechť je to pět.

const NUM_WALLPAPERS = 5;

Nyní vytvoříme modul, který nám pomůže s generováním náhodných čísel. Tento modul bude exportovat dvě funkce. Podívejme se na každou z nich.

• uniqueRandomNumbers: Tato funkce přijímá tři argumenty. Prvním je počet náhodných čísel, která mají být vrácena. Další dva argumenty určují rozsah, ve kterém mají být náhodná čísla vrácena, a to lowerLimit a upperLimit. Pokud zavoláte funkci uniqueRandomNumbers(5, 10, 20), bude vám vráceno pole pěti jedinečných náhodných čísel v rozsahu 10 až 20.
• randomNumberInRange: Tato funkce přijímá dva argumenty, které definují dolní, resp. horní mez, mezi nimiž se vrací jedno náhodné číslo. Pokud například zavoláte randomNumberInRange(2, 10), vrátí se unikátní náhodné číslo mezi 2 a 10.

Mohli jsme obě tyto funkce sloučit do jedné, ale protože jsem kazatelem kvalitního kódu, řídím se zásadou jediné odpovědnosti. SRP víceméně říká, že každá funkce by měla dělat dobře jednu věc a nedělat nic jiného. Dodržování zásad správného programování vám ušetří řadu budoucích bolestí hlavy.

Vytvořte nový soubor ve stejném adresáři jako index.ios.js. Kdybychom chtěli, mohli bychom tyto funkce umístit do index.ios.js, ale zamyslete se nad tím: pro druh účelu, kterému tento nový soubor slouží, můžeme tento soubor jednoduše zkopírovat a vložit do některého z našich nových projektů, který vyžaduje generování náhodných čísel, a používat ho odtud. Také díky tomu bude kód v index.ios.js o tolik čistší.

Soubor nazveme RandManager.js. Níže je zobrazen jeho obsah:

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

Nezapomeňte vyžadovat modul RandManager v index.ios.js. Stačí přidat: var RandManager = require('./RandManager.js'); pod příkaz use strict;. Jakmile máme modul RandManager připravený, provedeme následující změny v naší funkci 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) );}

Jakmile máme modul jsonData, načteme z modulu RandManager jedinečná náhodná čísla a uložíme je do pole randomIds. Poté toto pole procházíme ve smyčce, vybíráme tapetové datové objekty přítomné v určitém randomId a ukládáme je do pole walls.

Poté aktualizujeme naše stavové proměnné: isLoading na false, protože data byla stažena; a wallsJSON na walls.

Chceme-li vidět výsledek, upravíme funkci renderResults tak, aby vypadala následovně:

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

Už v prvním řádku uvnitř renderResults používáme novou funkci ES2015 zvanou destrukce. Pomocí destrukce se nám podařilo nahradit:

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

s:

var {wallsJSON, isLoading} = this.state;

ES2015 je dost cool, to vám říkám.

Poté uvnitř View procházíme načtená data wallsJSON pomocí mapy. Kdykoli chcete v JSX procházet kolekci, použijete konstrukci map.

Při procházení pole nebo kolekce a vykreslování komponenty vyžaduje React Native, abyste každé z podřízených komponent, které se vykreslují, přidělili key, jedinečné ID. Proto vidíte klíčovou vlastnost ve

<Text key={index}>

Po obnovení simulátoru…

Vidíme pět různých náhodných ID tapet, které se zobrazují. Změňte {wallpaper.id} na {wallpaper.author} v renderResults a měli byste vidět něco jako následující.

Skvělé! Teď si povídáme. Nyní jsme schopni z rozhraní API načíst a vyfiltrovat zadaný počet (v tomto případě pět) náhodných tapet. Vypadá to, že pro tuto část jsme skončili. Plácneme si!

Přidání komponenty Swiper

V této části zařadíme do naší aplikace komponentu Swiper. Tato komponenta nám umožní zobrazovat tapety v kontejneru s možností přejetí prstem.

Naučíte se, jak do naší aplikace začlenit komponentu React Native třetí strany. React Native má úžasnou podporu komunity a na GitHubu je bohatá sbírka nejrůznějších komponent třetích stran.

Pro naše účely použijeme react-native-swiper.

Přejděte v terminálu do adresáře projektu a spusťte následující příkaz:

npm install react-native-swiper --save

Nyní vyžadujte komponentu Swiper: přidejte var Swiper = require('react-native-swiper'); pod use strict.

Vyzkoušejme naši nově zařazenou komponentu Swiper.

Přejděte do metody renderResults a nahraďte View komponentou Swiper. Po provedení tohoto úkonu by vaše renderResults měla vypadat takto:

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

Provedení tohoto úkonu má za následek následující:

Místo toho, aby se jména autorů zobrazovala jako seznam, jsme je umístili do přehazovačky, která dává každé tapetě vlastní obrazovku, po které můžeme přejíždět. Zde musíme udělat ještě několik věcí: přidáme následující atributy do komponenty Swiper podle obrázku.

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

Přitom:

• Styluje body stránkování (modré body, které vidíte dole na předchozím obrázku, jsou bílé a větší).
• Zakáže průběžné posouvání (loop={false}). To znamená, že jakmile se dostanete na poslední stránku a potáhnete prstem dál, nevrátíte se zpět na první tapetu.
• Vyvolá onMomentumScrollEnd (kterému se budeme dále věnovat v další části návodu) pokaždé, když skončíme s potáhnutím.

Tímto jsme se dostali na konec první části. To byla cesta!

Shrnutí výukového kurzu React Native

• V první části jste se naučili, jak v Xcode nastavit prázdný projekt React Native.
• V druhé části jsme si pověděli o třídách ES2015 a proč byste měli dát přednost novější syntaxi spolu s vytvářením stavových proměnných a získáváním surových dat z API.
• Ve třetí části jsme prošli dynamické vykreslování aplikace na základě hodnoty, kterou má stavová proměnná. Také jsme provedli lehké pozicování flexboxu.
• Ve čtvrté části jsme vytvořili zcela nový modul, který se stará o generování náhodných čísel, a také jsme prošli jeho začlenění do hlavního souboru.
• V poslední části jsme do naší aplikace přidali první komponentu třetí strany, což byla díky Nodu hračka.

Do této chvíle, upřímně řečeno, naše aplikace nevypadá nijak zvlášť. Já vím. V příštím díle přidáme skutečné obrázky místo pouhých jmen autorů. A nejen to, budeme dělat i některé pokročilé věci, například vytvářet vlastní detektor dvojitého klepnutí pomocí rozhraní API PanHandler. Naučíte se, jak v Xcode propojit knihovnu a udělit aplikaci přístup k Camera Roll. Vytvoříme si také vlastní komponentu a mnoho dalšího. Zní to zajímavě? Uvidíme se v dalším díle.

(da, ml, og, il)