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

About The Author

Nash Vail ma pasję do projektowania interfejsów użytkownika. Obecnie jest studentem informatyki i aktywnie poszukuje możliwości odbycia stażu. …Więcej oNash↬

Pomysł budowania aplikacji mobilnych za pomocą JavaScript nie jest nowy. Widzieliśmy już takie frameworki jak Ionic i PhoneGap, które podjęły wyzwanie i w pewnym stopniu udało im się zdobyć spore wsparcie deweloperów i społeczności. Do części 2 tutorialu.

Te frameworki i cała idea budowania aplikacji mobilnych za pomocą JavaScript nigdy do mnie nie przemawiały. Zawsze myślałem, dlaczego po prostu nie nauczyć się Swift/Objective-C lub Javy i budować prawdziwe aplikacje? To zdecydowanie wymaga sporej ilości nauki, ale czy nie jest to właśnie to, co my programiści robimy i w czym powinniśmy być dobrzy? Szybko uczyć się nowych języków i frameworków? Jaki jest więc sens? Dla mnie zalety nigdy nie przeważały nad wątpliwościami.

Dopóki nie przeczytałem tego artykułu z Chalk + Chisel, a w szczególności następującej linii:

Przód kilka miesięcy, a ja jestem wystarczająco pewny siebie, aby powiedzieć, że mogę nigdy nie napisać aplikacji iOS w Objective-C lub Swift ponownie.

Co? Czy ty, tak jakby… mówisz poważnie?

Dalsze czytanie na SmashingMag:

• Why You Should Consider React Native For Your Mobile App
• Server-Side Rendering With React, Node And Express
• How To Scale React Applications
• Internationalizing React Apps

Czytając tak śmiałe twierdzenie, poszedłem naprzód i dałem React Native strzał. Dlaczego nie? Używałem już Reacta i uwielbiałem go. React Native jest tak podobny do Reacta (duh!), że poczujesz się jak w domu, jeśli jesteś już programistą Reacta. Nawet jeśli nie jesteś, React na szczęście jest bardzo łatwy do owinięcia wokół głowy.

Co będziemy budować

Nigdy nie miałem szczęścia znaleźć idealnej aplikacji do tapet dla mojego iPhone’a w App Store. Na pulpicie, Unsplash jest jeden-stop shop dla wszystkich moich potrzeb tapety. Na telefonie: Ustawienia → Tapeta 🙁

Więc, w przeciwieństwie do niektórych innych tutoriali, gdzie budujesz liczniki i ledwo ich używasz, w tym tutorialu, razem zbudujemy sobie aplikację, która wyciągnie losowe oszałamiające tapety z Unsplash, wyświetli je w estetyczny sposób i pozwoli Ci zapisać wybrane tapety do Rolki z aparatu. Uwierz mi, znalazłem się za pomocą tej aplikacji więcej niż początkowo myślałem. Nawet jeśli pod koniec tego tutoriala React Native nie zrobi na tobie wrażenia, to i tak w końcu będziesz miał naprawdę fajną aplikację do tapet. Czyż to nie wspaniałe?

Zanim zaczniemy, oto kilka rzeczy, które powinieneś znać:

1. JavaScript
2. Niektóre cechy ES2015, a mianowicie klasy, funkcje strzałkowe, destrukcja i ciągi szablonów
3. Mac OS X Terminal
4. CSS (yup!)
5. React (opcjonalnie)

Jeszcze jedna rzecz. Jak wyraźnie wskazuje tytuł, w tym tutorialu będziemy budować aplikację na iOS. Co wymaga, tak, nawet z React Native, abyś był na Macu. Z React Native na pewno można budować aplikacje na Androida na Windowsie i Linuksie, ale nie na iOS. Dlatego też, od tego momentu, ten tutorial zakłada, że używasz Mac OS X.

Takeaways

Pod koniec tego tutoriala, będziesz wystarczająco zaznajomiony z React Native, aby zacząć pisać własne aplikacje od razu. Przejdziemy przez zakładanie projektu w Xcode, instalowanie modułów i komponentów innych firm, łączenie bibliotek, stylizację za pomocą flexbox, tworzenie niestandardowego słuchacza gestów i wiele innych rzeczy.

Jeśli nie używałeś wcześniej Reacta, ten poradnik pozwoli Ci również zapoznać się z Reactem. React jest nową, gorącą biblioteką JS z ogromnym potencjałem i nie widzę, aby w najbliższej przyszłości miał się gdziekolwiek pojawić.

Tutorial ten został podzielony na dwie części dla twojej wygody. Każda część składa się z pięciu sekcji. W każdej z nich realizujemy cel, który przybliża nas o krok do ukończenia naszej aplikacji. Radzę, abyś po rozpoczęciu nauki skończył całą sekcję za jednym zamachem, ponieważ są one krótkie i w ten sposób poznasz całą koncepcję, którą staram się przedstawić bez przerywania pracy.

Dla twojej orientacji, ostateczny kod aplikacji, którą budujemy znajduje się w tym repo na GitHubie.

Setting Up A Blank React Native Project

Upewnij się, że masz zainstalowany Xcode 7.0 lub wyższy. można go pobrać za darmo z App Store.

Możliwości są (jeśli jesteś web developerem i czytasz to w 2016 roku) masz już zainstalowany Node. Ale jeśli tak nie jest, idź dalej i zainstaluj również Node. Kolejnym ważnym narzędziem, którego będziemy potrzebować jest npm. Node jest dostarczany z zainstalowanym npm; będziesz jednak musiał go zaktualizować, ponieważ jest on aktualizowany dość często. Postępuj zgodnie z tym przewodnikiem instalacji.

To wszystko, czego będziemy potrzebować. Teraz, z terminala uruchom npm install -g react-native-cli. To zainstaluje React Native globalnie w twoim systemie.

Jeśli wszystko wydaje ci się zbyt nowe lub po prostu czujesz się trochę zagubiony w całym procesie instalacji, oficjalny przewodnik Getting Start jest zawsze tam, aby ci pomóc.

Znajdź dobrą lokalizację na swoim komputerze, gdzie chciałbyś skonfigurować projekt. Gdy już tam będziesz, z terminala uruchom react-native init SplashWalls.

To powinno pobrać i zainstalować wszystkie wymagane moduły i utworzyć nowy folder o nazwie SplashWalls.

Jedną wielką rzeczą w React Native jest to, że możesz pisać zarówno aplikacje na Androida, jak i iOS razem z większością kodu JavaScript współdzielonego między nimi. Wewnątrz nowo utworzonego folderu znajdziesz dwa pliki .js: index.android.js oraz index.ios.js – nazwy nie wymagają wyjaśnienia. Jeśli budujesz aplikację na iOS, będziesz pracował z index.ios.js; z index.android.js dla aplikacji na Androida; i oba dla, no wiesz, obu platform.

Ponieważ budujemy aplikację na iOS, dla dobra tego samouczka i aby zachować czystość, pozbędziemy się index.android.js i folderu android całkowicie. index.ios.js jest plikiem, z którym będziemy pracować. Jest to plik, który jest wykonywany jako pierwszy, gdy aplikacja się uruchamia.

Następnie przejdź do folderu ios i odpal SplashWalls.xcodeproj.

Powinieneś zobaczyć okno Xcode, jak pokazano poniżej.

Zauważ ostrzeżenie na powyższym obrazku, które mówi „Nie znaleziono pasujących profili provisioningowych”. Naprawmy to.

Po pierwsze, zmień tekst w polu Bundle Identifier na coś niestandardowego. Musisz upewnić się, że cokolwiek wpiszesz jest zgodne z odwróconą konwencją DNS, w której nazwa domeny Twojej organizacji jest odwrócona i przyrostek z dalszymi identyfikatorami. Ta konwencja pomaga odróżnić Twoją aplikację od innych na urządzeniu i w App Store. Ja użyję com.nashvail.me.tutorial.SplashWalls; po prostu zastąp swoją nazwę w miejsce mojej, jeśli nie możesz czegoś wymyślić.

Następnie wybierz swoją nazwę z rozwijanej listy zespołów.

Kliknij Fix Issue.

Jak już przy tym jesteśmy, zwróć uwagę na sekcję Deployment Info. Ma ona zastosowane pewne domyślne ustawienia.

Zmień ustawienia tak, aby pasowały do poniższych:

Uczynimy aplikację tylko portretową i ukryjemy pasek stanu.

Przechodzimy dalej i uderzamy w przycisk Run w lewym górnym rogu Xcode. Spowoduje to uruchomienie okna terminala, jak pokazano poniżej. Początkowa transformacja zajmuje trochę czasu.

Po wykonaniu, powinieneś zobaczyć następujące wyjście w symulatorze:

I tym samym zakończyliśmy naszą pierwszą sekcję.

Pobieranie danych tapety z API

W tej sekcji będziemy wywoływać połączenia z API Unsplash.it z prośbą o dane tapety. Zanim jednak zaczniemy wykonywać całą interesującą pracę, musimy dokonać pewnych ustawień.

Przełączanie na składnię klas ES2015

Po otwarciu pliku index.ios.js zauważysz, że jest w nim już obecny pewien początkowy kod. To jest kod odpowiedzialny za wyjście w symulatorze (poprzedni obrazek).

Wewnątrz pliku index.ios.js zauważ linię kodu, która mówi var SplashWalls = React.createClass({ … }). Zamierzamy ją zmodyfikować. W tym tutorialu użyjemy składni class ES2015.

My, programiści, jesteśmy ciekawskimi duszami. Wiem, że pewnie pytasz: Dlaczego? Po co przechodzić na składnię class?

Wszystko sprowadza się do osobistych preferencji. Wcześniej intensywnie programowałem w językach zorientowanych obiektowo i class po prostu wydaje mi się bardziej znajome. Co więcej, używając class decydujesz się również na utrzymanie kodu nieco czystszym, ponieważ nie musisz dodawać przecinków po każdej deklaracji metody.

Po drugiej stronie, kiedy wybierzesz class nie dostaniesz funkcji takich jak autobinding lub dostęp do metody isMounted, co nie jest wcale złą rzeczą, ponieważ tak naprawdę nie znajdziesz się na przegranej pozycji, nie używając ich.

W jakikolwiek sposób pójdziesz, w końcu tworzysz klasę. Moja rada byłaby taka, aby użyć class. Jest to nowa funkcja i prędzej czy później przekonasz się, że używasz ES2015. A jeśli podążasz za tym samouczkiem, będziesz musiał użyć class – tak naprawdę nie masz wyboru!

Aby uzyskać więcej na ten temat, rozważ przeczytanie „React.Component vs React.createClass” Naman Goel i Zach Silveira.

Po wprowadzeniu niezbędnych zmian, blok kodu powinien wyglądać tak, jak pokazano na rysunku:

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

Dla osób nowych w React, kod wewnątrz return nawiasów może wydawać się trochę dziwny, ale to nie jest nauka o rakietach, tylko stara dobra składnia podobna do XML zwana JSX. Więcej na ten temat można przeczytać tutaj.

W porównaniu z implementacją sprzedclass, składnia var zniknęła. Również render: function(){… jest teraz po prostu render(){….

Hej! Ale czym jest ten Component, który rozszerzasz? I miałbyś rację, aby zapytać. Gdybyś teraz uruchomił projekt w Xcode, otrzymałbyś błąd mówiący, że Component nie jest zdefiniowany. Możesz tutaj zrobić dwie rzeczy: zastąpić Component przez React.Component; lub dodać nową linię wewnątrz bloku (pokazanego poniżej) na górze pliku.

W tym i późniejszych przykładach kodu, otaczam nowo dodane linie za pomocą //, aby łatwiej było Ci porównać kod, który piszesz, z tym, co jest tutaj pokazane. Upewnij się, że jeśli kopiujesz kod z przykładów, nie skończysz kopiując // razem z właściwym kodem. Ponieważ JSX nie obsługuje komentarzy /***/, spowoduje to awarię aplikacji, jeśli umieścisz je w swoim kodzie JSX.

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

Wszystko, co robi powyższy blok kodu, to zaoszczędzenie kilku naciśnięć klawiszy. Na przykład, jeśli nie uwzględniłbyś tych linii kodu na górze, musiałbyś napisać React.AppRegistry zamiast tylko AppRegistry za każdym razem, gdy chciałbyś to zrobić. Całkiem niezłe! Czyż nie? OK, nie tak bardzo.

Wróć do Xcode i uruchom projekt jeszcze raz, aby upewnić się, że nie zepsułeś niczego w procesie.

Wszystko dobrze? Świetnie! Przejdźmy dalej.

Wewnątrz klasy SplashWalls pierwszą rzeczą, którą musimy zrobić, jest dodanie konstruktora. Wewnątrz konstruktora zainicjalizujemy nasze zmienne stanu. Jedyne dwie zmienne stanowe, których będziemy potrzebować w tym momencie to tablica – wallsJSON – która będzie przechowywać wszystkie dane JSON pobrane z API, oraz isLoading, która jest zmienną typu Boolean, co oznacza, że będzie posiadać wartość true lub false. Posiadanie tej zmiennej stanu pomoże nam pokazać i ukryć ekran ładowania w zależności od tego, czy dane zostały załadowane, czy nie.

Wewnątrz klasy SplashWalls dodaj constructor, jak pokazano poniżej.

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

Następnie zdefiniujemy metodę fetchWallsJSON, która, cóż, robi to, co mówi. Pozostaw kilka linii poniżej nawiasu zamykającego konstruktora i dodaj następujące linie kodu:

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

Chcielibyśmy, aby ta funkcja została uruchomiona, gdy nasz komponent zostanie pomyślnie zamontowany. Dodaj metodę componentDidMount. Większość opisanych metod znajduje się wewnątrz klasy SplashWalls – nie zapomnę wspomnieć, kiedy tak nie jest.

componentDidMount jest metodą cyklu życia, która jest uruchamiana natychmiast po pierwszym renderowaniu.

Tutaj znajduje się dobre wyjaśnienie wszystkich metod cyklu życia komponentu React. Pamiętaj tylko, że ponieważ używamy nowszej składni class, możemy pominąć metodę getInitialState. Zastępuje ją deklaracja zmiennej this.state w constructor.

Dobrym pomysłem jest organizowanie metod wewnątrz swojej klasy w czysty sposób. Lubię trzymać wszystkie niestandardowe metody oddzielnie od metod cyklu życia. Ty też powinieneś.

Zadeklarujmy componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Zauważ, że wewnątrz metody fetchWallsJSON zalogowaliśmy komunikat do konsoli – ale gdzie jest konsola? Trzymaj się mocno.

Upewnij się, że masz wybrane okno symulatora i naciśnij Cmd + Control + Z. Z menu, które się pojawi, wybierz Debug in Chrome. Spowoduje to otwarcie nowej karty. Będąc w tej samej zakładce, przejdź do Dev Tools (Option + Cmd + J). W konsoli znajdziesz komunikat „Wallpapers will be fetched”.

Keep the debugger open for now. Odwiedź stronę unsplash.it/list w nowej karcie. Powinieneś zobaczyć całą rzutnię wypełnioną tablicą JSON. Każdy element w tablicy jest obiektem JavaScript przechowującym dane dla pojedynczej tapety. To właśnie te dane będziemy filtrować i pobierać z nich losowe tapety.

Najpierw sprawmy, aby fetchWallsJSON zrobił coś więcej niż tylko wylogował komunikat do konsoli.

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

Odśwież symulator (Cmd + R) lub, lepiej, włącz przeładowanie na żywo, naciskając Cmd + Ctrl + Z i wybierając Włącz przeładowanie na żywo. Po włączeniu przeładowania na żywo nie musisz odświeżać symulatora za każdym razem, gdy dokonasz zmiany w swoim kodzie. Po prostu zapisz w IDE, a symulator zostanie automatycznie odświeżony. Jeśli kiedykolwiek stworzyłeś aplikację w Xcode lub Android Studio wcześniej, znajdziesz tę funkcję szczególnie niesamowitą, ponieważ nie musisz naciskać przycisku Uruchom i rekompilować aplikacji za każdym razem, gdy wprowadzasz zmiany. Te małe kawałki sprawiają, że React Native jest o wiele bardziej atrakcyjny.

Po odświeżeniu, po odczekaniu kilku sekund, powinieneś zobaczyć następujące wyjście w konsoli:

Dobrze, teraz jesteśmy w stanie pobrać dane JSON tapet z API. Jak pewnie zauważyłeś, jest małe opóźnienie zanim dane zostaną zalogowane do konsoli. Jest to spowodowane tym, że w tle dane są pobierane z serwerów, co zajmuje trochę czasu.

Wygląda na to, że jest to idealny moment na dodanie ekranu ładowania.

Adding A Loading Screen

Pod koniec tego rozdziału będziemy mieli ekran ładowania wyświetlany podczas pobierania danych JSON.

Po pierwsze, pozbądźmy się wszystkiego z wnętrza metody render klasy SplashWall i dodajmy te linie kodu:

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

Mamy dwie nowe metody. Zadeklarujmy je również, skoro już przy tym jesteśmy

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

W zależności od tego, jaką wartość ma zmienna stanu isLoading, wyrenderowane zostaną dwa różne View komponenty. Jeśli isLoading ma wartość true, wyświetlimy spinner ładowania, a następnie tekst „Contacting Unsplash”; gdy isLoading ma wartość false (co oznacza, że dane zostały załadowane), wyświetlimy wyniki, które jak na razie są po prostu komponentem Text z napisem „Data loaded”.

Ale czegoś nam tu brakuje: nie zmieniamy wartości isLoading, gdy nasze dane zostały już pobrane. Zróbmy właśnie to. Przejdźmy do metody fetchWallsJSON i poniżej linii, która loguje jsonData do konsoli, dodajmy jedną dodatkową linię, aby zaktualizować 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 jest jedną z metod Component API Reacta. Jest to podstawowa metoda używana do wyzwalania aktualizacji UI.

Uwaga, w renderLoadingMessage mamy nowy komponent: ActivityIndicatorIOS (mówiąc prościej, spinner). Musimy zaimportować ten komponent, zanim będziemy mogli go użyć. Pamiętasz, jak importowaliśmy Component i zaoszczędziliśmy kilka naciśnięć klawiszy? Będziemy musieli zrobić właśnie to.

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

Musimy zrobić jeszcze jedną rzecz, zanim zobaczymy wyniki. Zauważ, że View zawierający ActivityIndicatorIOS ma styl ustawiony na styles.loadingContainer. Będziemy musieli go zdefiniować. Znajdź linię, która mówi var styles = StyleSheet.create({…. Tutaj zobaczysz, że jest już zdefiniowanych kilka stylów. Style te odpowiadają za stylizację początkowego komunikatu „Welcome to React Native” w symulatorze. Pozbądź się wszystkich predefiniowanych stylów i dodaj tylko jeden dla loadingContainer, jak pokazano na rysunku.

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

Wszystkie style, które stosujesz na komponentach w React Native, są zadeklarowane w sposób pokazany powyżej. StyleSheet.create przyjmuje obiekt JavaScript zawierający style jako argument, a następnie można uzyskać dostęp do stylów za pomocą operatora dot. Na przykład zastosowaliśmy styl do wrappera View w następujący sposób.

<View style={styles.loadingContainer}/>

Można również deklarować style inline:

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

To jednak sprawia, że nasz kod jest trochę zagracony. Kiedy masz wiele stylów zastosowanych do komponentu, zawsze dobrym pomysłem jest przechowywanie ich w zmiennej.

Style wyglądają bardzo podobnie do CSS, prawda? Wiesz dlaczego? Bo tak mają być – niczym się nie różnią. To sprawia, że React Native jest jeszcze łatwiejszy do przyswojenia dla web developerów. Kiedy budujesz aplikację w dedykowanym IDE (na przykład Xcode), otrzymujesz StoryBoard, aby bezpośrednio przeciągać i pozycjonować elementy UI, takie jak przyciski i etykiety na ekranie. Nie możesz tego zrobić w React Native, co – uwierz mi – nie jest wcale złą rzeczą.

React Native mocno wykorzystuje flexbox do pozycjonowania elementów na ekranie. Kiedy już dobrze opanujesz flexbox, pozycjonowanie elementów wokół jest dziecinnie proste. W każdym dniu będę wolał układ flexbox od StoryBoard, kropka. To po prostu jedna z tych rzeczy, które musisz wypróbować sam, aby zobaczyć różnicę.

Zapisz zmiany, przejdź do symulatora i naciśnij Cmd + R. Powinieneś zobaczyć ekran ładowania.

Po kilku sekundach powinieneś zobaczyć ekran z napisem „Dane załadowane”.

Filtrowanie i wybieranie losowych tapet

W tej sekcji przefiltrujemy dane tapet i wybierzemy określoną liczbę losowych tapet.

W tej sekcji skupimy się bardziej na JavaScript niż React Native. Przejdziemy przez tworzenie nowego modułu (pliku), który będzie obsługiwał generowanie liczb losowych. Jeśli moduły w JavaScript brzmią dla ciebie nowatorsko, rozważ przejście przez dokumentację modułów Node.js.

Przejdź do linii powyżej deklaracji class i zadeklaruj nową stałą, która powie aplikacji liczbę losowych tapet do wyboru; niech to będzie pięć.

const NUM_WALLPAPERS = 5;

Teraz stworzymy moduł, który pomoże nam w generowaniu liczb losowych. Moduł ten będzie eksportował dwie funkcje. Przyjrzyjmy się każdej z nich.

• uniqueRandomNumbers: Funkcja ta przyjmuje trzy argumenty. Pierwszy z nich to liczba liczb losowych, które mają zostać zwrócone. Kolejne dwa argumenty określają przedział, w którym mają być zwrócone liczby losowe, czyli lowerLimit i upperLimit. Jeśli wywołasz funkcję uniqueRandomNumbers(5, 10, 20) otrzymasz tablicę pięciu unikalnych liczb losowych z przedziału od 10 do 20.
• randomNumberInRange: Ta funkcja przyjmuje dwa argumenty określające odpowiednio dolną i górną granicę, pomiędzy którymi zwracana jest pojedyncza liczba losowa. Na przykład, jeśli wywołasz randomNumberInRange(2, 10), zwrócona zostanie unikalna liczba losowa pomiędzy 2 a 10.

Mogliśmy połączyć obie te funkcje w jedną, ale ponieważ jestem głosicielem dobrej jakości kodu, podążam za zasadą pojedynczej odpowiedzialności. SRP stwierdza, mniej więcej, że każda funkcja powinna robić jedną rzecz dobrze i nie robić nic innego. Przestrzeganie zasad dobrego programowania pozwala zaoszczędzić sobie wielu przyszłych bólów głowy.

Utwórz nowy plik w tym samym katalogu co index.ios.js. Gdybyśmy chcieli, moglibyśmy umieścić te funkcje w index.ios.js, ale pomyślmy o tym: do celów, do jakich służy ten nowy plik, możemy go po prostu skopiować i wkleić do każdego z naszych nowych projektów, który wymaga generowania liczb losowych i stamtąd go używać. Ponadto, dzięki temu kod wewnątrz index.ios.js jest o wiele czystszy.

Nazwiemy ten plik RandManager.js. Poniżej przedstawiamy jego zawartość:

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

Nie zapomnij zażądać modułu RandManager w pliku index.ios.js. Wystarczy dodać: var RandManager = require('./RandManager.js'); poniżej deklaracji use strict;. Gdy mamy już RandManager gotowy, wprowadzimy następujące zmiany do naszej funkcji 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) );}

Gdy mamy już jsonData, pobieramy unikalne liczby losowe z RandManager i przechowujemy je w tablicy randomIds. Następnie wykonujemy pętlę przez tę tablicę, zbierając obiekty danych tapety obecne w danym randomId i przechowując je w tablicy walls.

Potem aktualizujemy nasze zmienne stanu: isLoading do false, ponieważ dane zostały pobrane; oraz wallsJSON do walls.

Aby zobaczyć rezultaty, zmodyfikuj funkcję renderResults tak, aby przypominała poniższe:

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

W pierwszej linii wewnątrz renderResults wykorzystujemy nową funkcję ES2015 zwaną destrukturyzacją. Dzięki destrukturyzacji udało nam się zastąpić:

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

z:

var {wallsJSON, isLoading} = this.state;

ES2015 jest całkiem fajny, mówię ci.

Następnie, wewnątrz View zapętlamy pobrane wallsJSONdane za pomocą mapy. Ilekroć chcesz zapętlić się przez kolekcję w JSX, używasz konstrukcji map.

Także, podczas pętli przez tablicę lub kolekcję i renderowania komponentu, React Native wymaga, abyś nadał key, unikalny identyfikator każdemu z komponentów dziecięcych, które renderuje. Dlatego widzisz kluczową właściwość w

<Text key={index}>

Po odświeżeniu symulatora…

Widzimy pięć różnych losowych identyfikatorów tapet, które są wyświetlane. Zmień {wallpaper.id} na {wallpaper.author} w renderResults i powinieneś zobaczyć coś takiego jak poniżej.

Wspaniale! Teraz rozmawiamy. Jesteśmy teraz w stanie pobrać i przefiltrować określoną liczbę (pięć, w tym przypadku) losowych tapet z API. Wygląda na to, że skończyliśmy na tym rozdziale. High five!

Adding The Swiper Component

W tym rozdziale dołączymy do naszej aplikacji komponent Swiper. Ten komponent pozwoli nam na wyświetlanie tapet w kontenerze z możliwością przesuwania palcem.

Dowiesz się, jak włączyć komponent React Native innej firmy do naszej aplikacji. React Native ma niesamowite wsparcie społeczności, a na GitHubie znajduje się bogata kolekcja wszelkiego rodzaju różnych komponentów firm trzecich.

Do naszych celów użyjemy react-native-swiper.

Przejdź do katalogu projektu w terminalu i uruchom następujące polecenie:

npm install react-native-swiper --save

Teraz wymagaj komponentu Swiper: dodaj var Swiper = require('react-native-swiper'); poniżej use strict.

Wypróbujmy nasz nowo dołączony komponent Swiper.

Przejdź do metody renderResults i zamień View na Swiper. Po wykonaniu tych czynności, Twój renderResults powinien wyglądać następująco:

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

Postępując w ten sposób, uzyskasz następujący efekt:

Zamiast pokazywać nazwiska autorów w postaci listy, umieściliśmy je w swiperze, dzięki czemu każda tapeta ma swój własny ekran, po którym możemy przesuwać palcem. Musimy tutaj zrobić jeszcze kilka rzeczy: dodać następujące atrybuty do komponentu Swiper, jak pokazano na rysunku.

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

Robiąc to:

• Styluje kropki paginacji (sprawia, że niebieskie kropki widoczne na dole na poprzednim obrazku są białe i większe).
• Wyłącza ciągłe przesuwanie (loop={false}). Oznacza to, że gdy dotrzesz do ostatniej strony i przesuniesz palcem dalej, nie zostaniesz cofnięty do pierwszej tapety.
• Wypali onMomentumScrollEnd (w którą zagłębimy się w następnej części poradnika) za każdym razem, gdy skończymy przesuwać palcem.

Tym samym zakończyliśmy pierwszą część. Co za podróż!

Podsumowując samouczek React Native

• W pierwszej części dowiedziałeś się, jak założyć pusty projekt React Native w Xcode.
• W drugiej części rozmawialiśmy o klasach ES2015 i dlaczego powinieneś preferować nowszą składnię wraz z tworzeniem zmiennych stanu i pobieraniem surowych danych z API.
• W części trzeciej zajęliśmy się dynamicznym renderowaniem aplikacji w oparciu o wartość zmiennej stanu. Ponadto, wykonaliśmy lekkie pozycjonowanie flexbox.
• W czwartej sekcji stworzyliśmy zupełnie nowy moduł do obsługi generowania liczb losowych, a także zajęliśmy się włączeniem go do głównego pliku.
• W ostatniej sekcji dodaliśmy pierwszy komponent strony trzeciej do naszej aplikacji, co było bułką z masłem, dzięki Node.

Do tej pory, jeśli mam być szczery, nasza aplikacja nie wygląda zbyt szczególnie. Wiem. W następnej części dodamy rzeczywiste obrazy zamiast samych nazwisk autorów. Nie tylko to, będziemy robić kilka zaawansowanych rzeczy, takich jak tworzenie niestandardowego detektora podwójnego stuknięcia przy użyciu PanHandler API. Dowiesz się, jak połączyć bibliotekę w Xcode i przyznać aplikacji dostęp do Rolki Aparatu. Stworzymy również nasz własny komponent i wiele więcej. Brzmi interesująco? Do zobaczenia w kolejnej części.

(da, ml, og, il)