Articles

React Native Tutorial – Bauen Sie Ihre erste iOS App mit JavaScript (Teil 1)

On November 24, 2021 by admin

Diese Frameworks und die ganze Idee, mobile Apps mit JavaScript zu bauen, haben mich allerdings nie gereizt. Ich dachte immer, warum nicht einfach Swift/Objective-C oder Java lernen und echte Anwendungen entwickeln? Das erfordert natürlich einen erheblichen Lernaufwand, aber ist es nicht das, was wir Entwickler tun und können sollten? Schnell neue Sprachen und Frameworks lernen? Was ist dann der Sinn? Für mich haben die Vorteile nie die Zweifel überwogen.

Die Idee, mobile Apps mit JavaScript zu entwickeln, ist nicht neu. Wir haben gesehen, wie Frameworks wie Ionic und PhoneGap die Herausforderung angenommen haben und bis zu einem gewissen Grad erfolgreich waren, indem sie eine ziemliche Menge an Entwickler- und Community-Unterstützung gewonnen haben. Zu Teil 2 des Tutorials

Diese Frameworks und die ganze Idee, mobile Anwendungen mit JavaScript zu entwickeln, haben mich allerdings nie gereizt. Ich dachte immer, warum nicht einfach Swift/Objective-C oder Java lernen und echte Anwendungen erstellen? Das erfordert natürlich einen erheblichen Lernaufwand, aber ist es nicht das, was wir Entwickler tun und können sollten? Schnell neue Sprachen und Frameworks lernen? Was ist dann der Sinn? Für mich überwogen die Vorteile nie die Zweifel.

Bis ich diesen Artikel von Chalk + Chisel las, insbesondere die folgende Zeile:

Nach ein paar Monaten bin ich zuversichtlich genug, um zu sagen, dass ich vielleicht nie wieder eine iOS-App in Objective-C oder Swift schreiben werde.

Was? Ist das dein Ernst?

Weitere Lektüre auf SmashingMag:

• Warum Sie React Native für Ihre mobile App in Betracht ziehen sollten
• Server-Side Rendering mit React, Node und Express
• Wie man React-Anwendungen skaliert
• Internationalisierung von React-Apps

Eine solch kühne Behauptung zu lesen, hat mich dazu gebracht, React Native einen Versuch zu geben. Why not? Ich benutzte bereits React und liebte es. React Native ist React so ähnlich (duh!), dass Sie sich sofort zu Hause fühlen werden, wenn Sie bereits ein React-Entwickler sind. Und selbst wenn nicht, ist React glücklicherweise sehr einfach zu verstehen.

Was wir bauen werden

Ich hatte noch nie Glück, die perfekte Wallpaper-App für mein iPhone im App Store zu finden. Auf dem Desktop ist Unsplash die zentrale Anlaufstelle für alle meine Wallpaper-Bedürfnisse. Auf dem Telefon: Einstellungen → Hintergrundbilder 🙁

Im Gegensatz zu anderen Tutorials, in denen man Zähler baut und sie kaum benutzt, bauen wir uns in diesem Tutorial gemeinsam eine App, die zufällige, atemberaubende Hintergrundbilder von Unsplash zieht, sie auf ästhetisch ansprechende Weise anzeigt und es dir ermöglicht, Hintergrundbilder deiner Wahl in der Camera Roll zu speichern. Glauben Sie mir, ich habe diese App mehr genutzt, als ich ursprünglich dachte. Selbst wenn dich React Native am Ende dieses Tutorials nicht beeindruckt, wirst du am Ende eine wirklich coole Wallpaper-App haben. Ist das nicht großartig?

Bevor wir anfangen, sollten Sie mit einigen Dingen vertraut sein:

1. JavaScript
2. Einige ES2015-Features, nämlich Klassen, Pfeilfunktionen, Destrukturierung und Template-Strings
3. Mac OS X Terminal
4. CSS (ja!)
5. React (optional)

Eine Sache noch. Wie der Titel schon sagt, werden wir in diesem Tutorial eine iOS-App bauen. Das setzt voraus, ja, auch mit React Native, dass du einen Mac verwendest. Mit React Native kann man definitiv Android-Apps auf Windows und Linux erstellen, aber keine iOS-Apps. Daher wird in diesem Tutorial davon ausgegangen, dass Sie mit Mac OS X arbeiten.

Takeaways

Am Ende dieses Tutorials werden Sie genug mit React Native vertraut sein, um sofort mit dem Schreiben eigener Apps zu beginnen. Wir gehen auf die Einrichtung eines Projekts in Xcode, die Installation von Modulen und Komponenten von Drittanbietern, die Verknüpfung von Bibliotheken, das Styling mit Flexbox, die Erstellung eines benutzerdefinierten Gesten-Listeners und viele andere Dinge ein.

Wenn Sie React noch nicht verwendet haben, wird dieses Tutorial Sie auch mit React vertraut machen. React ist die neue heiße JS-Bibliothek mit viel Potenzial, und ich sehe nicht, dass sie in naher Zukunft irgendwo hingehen wird.

Dieses Tutorial wurde in zwei Teile aufgeteilt, um es Ihnen zu erleichtern. Jeder Teil besteht aus fünf Abschnitten. In jedem Abschnitt erreichen wir ein Ziel, das uns einen Schritt näher an die Fertigstellung unserer App bringt. Ich würde raten, dass du, wenn du einmal angefangen hast, den ganzen Abschnitt in einem Rutsch durcharbeitest, da sie kurz sind und du auf diese Weise das ganze Konzept, das ich versuche vorzustellen, kennenlernst, ohne deinen Fluss zu unterbrechen.

Zu deiner Information: Der endgültige Code für die App, die wir bauen, ist in diesem GitHub-Repository zu finden.

Einrichten eines leeren React Native-Projekts

Stellen Sie sicher, dass Sie Xcode 7.0 oder höher installiert haben. Es kann kostenlos aus dem App Store heruntergeladen werden.

Wahrscheinlich (wenn Sie ein Webentwickler sind und dies im Jahr 2016 lesen) haben Sie bereits Node installiert. Aber wenn das nicht der Fall ist, installieren Sie Node ebenfalls. Ein weiteres wichtiges Tool, das wir brauchen, ist npm. Node wird mit installiertem npm ausgeliefert; Sie müssen es jedoch aktualisieren, da es recht häufig aktualisiert wird. Folgen Sie dieser Installationsanleitung.

Das ist alles, was wir brauchen. Führen Sie nun im Terminal npm install -g react-native-cli aus. Dadurch wird React Native global auf deinem System installiert.

Wenn dir alles zu neu erscheint oder du dich bei der ganzen Installation ein wenig verloren fühlst, hilft dir die offizielle Installationsanleitung weiter.

Finde einen guten Platz auf deinem Computer, an dem du das Projekt einrichten möchtest. Führen Sie dann im Terminal den Befehl react-native init SplashWalls aus.

Dies sollte alle erforderlichen Module abrufen und installieren und einen neuen Ordner mit dem Namen SplashWalls erstellen.

Eine großartige Sache an React Native ist, dass Sie sowohl Android- als auch iOS-Anwendungen zusammen schreiben können, wobei ein Großteil des JavaScript-Codes gemeinsam genutzt wird. In dem neu erstellten Ordner finden Sie zwei .js-Dateien: index.android.js und index.ios.js – die Namen sind selbsterklärend. Wenn Sie eine iOS-App erstellen, werden Sie mit index.ios.js arbeiten; mit index.android.js für eine Android-App; und mit beiden für, Sie wissen schon, beide Plattformen.

Da wir eine iOS-App erstellen, werden wir für dieses Tutorial und um die Dinge sauber zu halten, die index.android.js und den android-Ordner ganz loswerden. index.ios.js ist die Datei, mit der wir arbeiten werden. Dies ist die Datei, die beim Starten der App zuerst ausgeführt wird.

Als Nächstes gehen Sie in den ios-Ordner und starten Sie SplashWalls.xcodeproj.

Sie sollten ein Xcode-Fenster wie das unten gezeigte sehen.

Beachten Sie die Warnung im obigen Bild, die besagt: „Keine passenden Bereitstellungsprofile gefunden.“ Lassen Sie uns das beheben.

Zunächst ändern Sie den Text im Feld Bundle Identifier in einen eigenen Text. Achten Sie darauf, dass Ihre Eingabe der Reverse-DNS-Konvention entspricht, bei der der Domänenname Ihrer Organisation umgekehrt und mit weiteren Bezeichnungen versehen wird. Diese Konvention hilft, Ihre Anwendung von anderen auf einem Gerät und im App Store zu unterscheiden. Ich werde com.nashvail.me.tutorial.SplashWalls verwenden; ersetzen Sie einfach Ihren Namen anstelle des meinen, wenn Sie sich nichts ausdenken können.

Wählen Sie als Nächstes Ihren Namen aus dem Team-Dropdown aus.

Klicken Sie auf Fix Issue.

Wenn wir schon dabei sind, beachten Sie den Abschnitt Deployment Info. Er enthält einige Standardeinstellungen.

Ändern Sie die Einstellungen wie folgt:

Wir machen die App im Hochformat und blenden die Statusleiste aus.

Gehen Sie weiter und drücken Sie die Schaltfläche Ausführen oben links in Xcode. Dadurch wird ein Terminalfenster wie das unten gezeigte gestartet. Die anfängliche Umwandlung nimmt etwas Zeit in Anspruch.

Sobald dies geschehen ist, sollten Sie die folgende Ausgabe im Simulator sehen:

Und damit haben wir unseren ersten Abschnitt abgeschlossen.

Hintergrunddaten von der API abrufen

In diesem Abschnitt werden wir Aufrufe an die Unsplash.it-API machen, um Hintergrunddaten abzufragen. Aber bevor wir mit der interessanten Arbeit beginnen, müssen wir einige Vorbereitungen treffen.

Umstellung auf ES2015-Klassensyntax

Wenn Sie die Datei index.ios.js öffnen, werden Sie feststellen, dass bereits erster Code vorhanden ist. Dies ist der Code, der für die Ausgabe im Simulator verantwortlich ist (vorheriges Bild).

In der Datei index.ios.js finden Sie eine Codezeile mit der Bezeichnung var SplashWalls = React.createClass({ … }). Diese werden wir ändern. Wir werden für dieses Tutorial die class-Syntax von ES2015 verwenden.

Wir Entwickler sind neugierige Seelen. Ich weiß, dass Sie sich fragen werden: „Warum? Warum zur class-Syntax wechseln?

Es ist alles eine Frage der persönlichen Vorliebe. Ich habe schon ausgiebig in objektorientierten Sprachen programmiert, und class kommt mir einfach vertrauter vor. Außerdem hält man mit class den Code etwas sauberer, da man nicht nach jeder Methodendeklaration ein Komma einfügen muss.

Auf der anderen Seite erhält man mit class keine Funktionen wie Autobindung oder Zugriff auf die isMounted-Methode, was überhaupt nicht schlecht ist, da man nicht wirklich in Schwierigkeiten gerät, wenn man diese nicht verwendet.

Wie auch immer man sich entscheidet, man erstellt schließlich eine Klasse. Mein Rat wäre, class zu verwenden. Es ist eine neue Funktion und früher oder später werden Sie ES2015 verwenden. Und wenn du diesem Tutorial folgst, wirst du class verwenden müssen – du hast nicht wirklich eine Wahl!

Für mehr zu diesem Thema solltest du „React.Component vs React.createClass“ von Naman Goel und Zach Silveira lesen.

Nachdem du die notwendigen Änderungen vorgenommen hast, sollte der Codeblock nun wie folgt aussehen:

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

Für Leute, die neu in React sind, mag der Code innerhalb der return Parens ein wenig verrückt erscheinen, aber es ist keine Raketenwissenschaft, nur die gute alte XML-ähnliche Syntax namens JSX. Lesen Sie hier mehr darüber.

Im Vergleich zur Implementierung vor class ist die var-Syntax verschwunden. Auch render: function(){… ist jetzt nur noch render(){….

Hey! Aber was ist das Component, das Sie erweitern? Und du hast Recht, das zu fragen. Wenn Sie das Projekt jetzt in Xcode ausführen, erhalten Sie eine Fehlermeldung, dass Component nicht definiert ist. Sie können hier zwei Dinge tun: Ersetzen Sie Component durch React.Component oder fügen Sie eine neue Zeile innerhalb des Blocks (siehe unten) am Anfang der Datei ein.

In diesem und in späteren Codebeispielen umrande ich die neu hinzugefügten Zeilen mit //, damit Sie den Code, den Sie schreiben, leichter mit dem hier gezeigten vergleichen können. Achten Sie nur darauf, dass Sie beim Kopieren von Code aus den Beispielen nicht // zusammen mit dem eigentlichen Code kopieren. Da JSX keine /***/-Kommentare unterstützt, stürzt die Anwendung ab, wenn Sie diese in Ihren JSX-Code einfügen.

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

Der obige Code-Block erspart Ihnen lediglich ein paar Tastenanschläge. Wenn Sie diese Codezeilen oben nicht einfügen würden, müssten Sie zum Beispiel jedes Mal React.AppRegistry statt nur AppRegistry schreiben. Das ist verdammt cool! Oder nicht? Okay, nicht ganz.

Gehen Sie zurück zu Xcode und führen Sie das Projekt noch einmal aus, um sicherzustellen, dass Sie dabei nichts kaputt gemacht haben.

Alles in Ordnung? Prima! Machen wir weiter.

Innerhalb der Klasse SplashWalls müssen wir als erstes einen Konstruktor hinzufügen. Innerhalb des Konstruktors werden wir unsere Zustandsvariablen initialisieren. Die einzigen beiden Zustandsvariablen, die wir zu diesem Zeitpunkt benötigen, sind ein Array – wallsJSON -, in dem alle von der API abgerufenen JSON-Daten gespeichert werden, und isLoading, eine boolesche Variable, die entweder den Wert true oder false enthält. Diese Statusvariable hilft uns, den Ladebildschirm ein- und auszublenden, je nachdem, ob die Daten geladen wurden oder nicht.

Innerhalb der Klasse SplashWalls fügen Sie die constructor wie unten gezeigt ein.

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

Als Nächstes definieren wir eine fetchWallsJSON-Methode, die, nun ja, tut, was sie sagt. Lassen Sie ein paar Zeilen unter der schließenden Klammer des Konstruktors und fügen Sie die folgenden Codezeilen hinzu:

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

Wir möchten, dass diese Funktion ausgelöst wird, sobald unsere Komponente erfolgreich eingebunden wurde. Fügen Sie die Methode componentDidMount hinzu. Die meisten der beschriebenen Methoden gehören in die Klasse SplashWalls – ich werde nicht vergessen zu erwähnen, wenn sie es nicht tun.

componentDidMount ist eine Lifecycle-Methode, die sofort nach dem ersten Rendering abgefeuert wird.

Hier finden Sie eine gute Erklärung aller Lifecycle-Methoden der React-Komponenten. Denken Sie nur daran, dass wir, da wir die neuere class-Syntax verwenden, die getInitialState-Methode weglassen können. Sie wird durch eine this.state-Variablendeklaration in der constructor ersetzt.

Es ist eine gute Idee, die Methoden innerhalb deiner Klasse sauber zu organisieren. Ich mag es, alle benutzerdefinierten Methoden von den Lifecycle-Methoden getrennt zu halten. Das sollten Sie auch tun.

Lassen Sie uns componentDidMount deklarieren:

componentDidMount() { this.fetchWallsJSON();}

Beachten Sie, dass wir innerhalb der Methode fetchWallsJSON eine Nachricht auf der Konsole protokolliert haben – aber wo ist die Konsole? Bleiben Sie dran.

Vergewissern Sie sich, dass das Simulator-Fenster ausgewählt ist, und drücken Sie Cmd + Control + Z. Wählen Sie aus dem sich öffnenden Menü Debug in Chrome. Daraufhin wird eine neue Registerkarte geöffnet. Wechseln Sie in dieser Registerkarte zu den Entwicklungswerkzeugen (Option + Cmd + J). In der Konsole finden Sie die Meldung „Wallpapers will be fetched“.

Lassen Sie den Debugger vorerst geöffnet. Besuchen Sie unsplash.it/list in einer neuen Registerkarte. Sie sollten sehen, dass das gesamte Ansichtsfenster mit einem JSON-Array gefüllt ist. Jedes Element in diesem Array ist ein JavaScript-Objekt, das Daten für ein einzelnes Hintergrundbild enthält. Dies sind die Daten, die wir filtern und aus denen wir zufällige Hintergrundbilder auswählen werden.

Lassen Sie uns zunächst dafür sorgen, dass fetchWallsJSON mehr tut, als nur eine Meldung auf der Konsole zu protokollieren.

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

Aktualisieren Sie den Simulator (Cmd + R) oder, besser noch, aktivieren Sie das Live-Reload, indem Sie Cmd + Strg + Z drücken und Enable live reload wählen. Wenn Sie Live-Reload aktivieren, müssen Sie den Simulator nicht jedes Mal aktualisieren, wenn Sie eine Änderung an Ihrem Code vornehmen. Speichern Sie einfach in der IDE und der Simulator wird automatisch neu geladen. Wenn Sie schon einmal eine App in Xcode oder Android Studio entwickelt haben, werden Sie diese Funktion besonders toll finden, da Sie nicht jedes Mal, wenn Sie eine Änderung vornehmen, auf die Schaltfläche Ausführen klicken und die App neu kompilieren müssen. Diese kleinen Dinge machen React Native so viel attraktiver.

Nach dem Aktualisieren, nachdem Sie ein paar Sekunden gewartet haben, sollten Sie die folgende Ausgabe in der Konsole sehen:

Gut, jetzt sind wir in der Lage, die JSON-Daten von Wallpapers aus der API zu holen. Wie Sie vielleicht bemerkt haben, gibt es eine kleine Verzögerung, bevor die Daten in der Konsole protokolliert werden. Das liegt daran, dass die Daten im Hintergrund von den Servern heruntergeladen werden, was einige Zeit in Anspruch nimmt.

Das sieht nach einem perfekten Zeitpunkt aus, um einen Ladebildschirm hinzuzufügen.

Hinzufügen eines Ladebildschirms

Am Ende dieses Abschnitts wird ein Ladebildschirm angezeigt, während die JSON-Daten heruntergeladen werden.

Zuerst entfernen wir alles aus der Methode render der Klasse SplashWall und fügen diese Codezeilen hinzu:

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

Wir haben zwei neue Methoden. Deklarieren wir sie auch, wenn wir schon dabei sind

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

Abhängig davon, welchen Wert die Statusvariable isLoading hat, werden zwei verschiedene View Komponenten gerendert. Wenn isLoading wahr ist, zeigen wir einen Lade-Spinner, gefolgt von dem Text „Contacting Unsplash“; wenn isLoading falsch ist (was bedeutet, dass die Daten geladen wurden), zeigen wir die Ergebnisse, was im Moment nur eine Text-Komponente ist, die sagt „Data loaded“.

Aber wir übersehen hier etwas: wir ändern den Wert von isLoading nicht, sobald unsere Daten heruntergeladen wurden. Lassen Sie uns genau das tun. Gehen Sie zu der Methode fetchWallsJSON und fügen Sie unterhalb der Zeile, die jsonData in die Konsole protokolliert, eine zusätzliche Zeile hinzu, um isLoading zu aktualisieren.

 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 ist eine der Methoden der React Component API. Es ist die primäre Methode, die verwendet wird, um UI-Updates auszulösen.

Beachten Sie, in renderLoadingMessage haben wir eine neue Komponente: ActivityIndicatorIOS (einfach gesagt, der Spinner). Wir müssen diese Komponente importieren, bevor wir sie verwenden können. Erinnern Sie sich an den Import von Component, bei dem wir ein paar Tastenanschläge gespart haben? Wir müssen genau das tun.

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

Bevor wir die Ergebnisse sehen können, müssen wir noch eine Sache tun. Beachten Sie, dass für View, das ActivityIndicatorIOS enthält, der Stil auf styles.loadingContainer gesetzt ist. Das müssen wir definieren. Suchen Sie die Zeile mit dem Text var styles = StyleSheet.create({…. Hier sehen Sie, dass bereits einige Stile definiert sind. Diese Stile sind für das Styling der anfänglichen „Welcome to React Native“-Nachricht im Simulator verantwortlich. Entfernen Sie alle vordefinierten Stile und fügen Sie nur einen für loadingContainer wie gezeigt hinzu.

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

Alle Stile, die Sie auf Komponenten in React Native anwenden, werden auf die oben gezeigte Weise deklariert. StyleSheet.create nimmt ein JavaScript-Objekt auf, das Stile als Argument enthält, und dann kann auf die Stile mit dem dot-Operator zugegriffen werden. So haben wir den Stil auf den Wrapper View auf folgende Weise angewendet:

<View style={styles.loadingContainer}/>

Sie können Stile auch inline deklarieren:

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

Das macht unseren Code allerdings etwas unübersichtlich. Wenn Sie mehrere Stile auf eine Komponente anwenden, ist es immer eine gute Idee, sie in einer Variablen zu speichern.

Die Stile sehen CSS sehr ähnlich, nicht wahr? Wissen Sie warum? Weil sie so aussehen sollen – sie sind nicht anders. Das macht den Einstieg in React Native für Webentwickler noch einfacher. Wenn Sie eine App in einer speziellen IDE (z. B. Xcode) erstellen, steht Ihnen ein StoryBoard zur Verfügung, mit dem Sie UI-Elemente wie Schaltflächen und Beschriftungen direkt auf den Bildschirm ziehen und positionieren können. In React Native ist das nicht möglich, was – glauben Sie mir – gar nicht so schlecht ist.

React Native nutzt Flexbox, um Elemente auf dem Bildschirm zu positionieren. Sobald man mit Flexbox vertraut ist, ist die Positionierung von Elementen ein Kinderspiel. Ich werde jederzeit das Flexbox-Layout dem StoryBoard vorziehen, Punkt. Es ist einfach eines dieser Dinge, die man selbst ausprobieren muss, um den Unterschied zu erkennen.

Speichern Sie die Änderungen, gehen Sie zum Simulator und drücken Sie Cmd + R. Sie sollten den Ladebildschirm sehen.

Nach ein paar Sekunden sollten Sie den Bildschirm sehen, auf dem steht „Daten geladen“.

Filtern und Auswählen von zufälligen Hintergrundbildern

In diesem Abschnitt werden wir durch die Hintergrundbilddaten filtern und eine bestimmte Anzahl von zufälligen Hintergrundbildern auswählen.

Dieser Abschnitt wird sich mehr auf JavaScript als auf React Native konzentrieren. Wir werden ein neues Modul (Datei) erstellen, das die Erzeugung von Zufallszahlen übernimmt. Wenn Module in JavaScript für Sie neu klingen, sollten Sie sich die Node.js-Module ansehen.

Gehen Sie zu der Zeile über der class-Deklaration und deklarieren Sie eine neue Konstante, die der App die Anzahl der zufälligen Tapeten mitteilt, die sie auswählen soll; nehmen wir fünf.

const NUM_WALLPAPERS = 5;

Jetzt werden wir ein Modul erstellen, das uns bei der Erzeugung von Zufallszahlen hilft. Dieses Modul wird zwei Funktionen exportieren. Schauen wir uns jede von ihnen an.

• uniqueRandomNumbers: Diese Funktion nimmt drei Argumente entgegen. Das erste ist die Anzahl der Zufallszahlen, die zurückgegeben werden sollen. Die nächsten beiden Argumente definieren den Bereich, in dem die Zufallszahlen zurückgegeben werden sollen, nämlich lowerLimit und upperLimit. Wenn Sie die Funktion uniqueRandomNumbers(5, 10, 20) aufrufen, erhalten Sie ein Array mit fünf eindeutigen Zufallszahlen zwischen 10 und 20.
• randomNumberInRange: Diese Funktion nimmt zwei Argumente auf, die die untere bzw. obere Grenze festlegen, zwischen denen eine einzelne Zufallszahl zurückgegeben wird. Wenn Sie zum Beispiel randomNumberInRange(2, 10) aufrufen, wird eine einzelne Zufallszahl zwischen 2 und 10 zurückgegeben.

Wir hätten diese beiden Funktionen in einer einzigen zusammenfassen können, aber da ich ein Prediger von gutem Qualitätscode bin, folge ich dem Prinzip der einzigen Verantwortung. Das SRP besagt, mehr oder weniger, dass jede Funktion nur eine Sache gut machen sollte und nichts anderes. Das Befolgen guter Programmierprinzipien erspart Ihnen in Zukunft eine Reihe von Kopfschmerzen.

Erstellen Sie eine neue Datei im gleichen Verzeichnis wie index.ios.js. Wenn wir wollten, könnten wir diese Funktionen in index.ios.js einfügen, aber denken Sie darüber nach: Für die Art von Zweck, dem diese neue Datei dient, können wir diese Datei einfach kopieren und in jedes unserer neuen Projekte einfügen, das die Erzeugung von Zufallszahlen erfordert, und sie von dort aus verwenden. Außerdem bleibt der Code in index.ios.js so viel sauberer.

Wir nennen die Datei RandManager.js. Der Inhalt ist unten abgebildet:

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

Vergessen Sie nicht, das RandManager Modul in index.ios.js zu benötigen. Einfach hinzufügen: var RandManager = require('./RandManager.js'); unterhalb der use strict;-Anweisung. Sobald wir RandManager fertig haben, nehmen wir die folgenden Änderungen an unserer fetchWallsJSON-Funktion vor:

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

Wenn wir jsonData haben, rufen wir eindeutige Zufallszahlen aus RandManager ab und speichern sie im Array randomIds. Dann gehen wir in einer Schleife durch dieses Array, holen die Tapetendatenobjekte, die an einem bestimmten randomId vorhanden sind, und speichern sie im walls-Array.

Dann aktualisieren wir unsere Zustandsvariablen: isLoading auf false, da die Daten heruntergeladen wurden; und wallsJSON auf walls.

Um die Ergebnisse zu sehen, ändern Sie die Funktion renderResults so, dass sie wie folgt aussieht:

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

In der allerersten Zeile in renderResults verwenden wir eine neue ES2015-Funktion namens Destrukturierung. Mit der Destrukturierung haben wir es geschafft:

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

durch:

var {wallsJSON, isLoading} = this.state;

ES2015 ist ziemlich cool, das kann ich dir sagen.

Dann, innerhalb der View schleifen wir durch die abgerufenen wallsJSON Daten mit Hilfe von map. Wann immer du in JSX eine Schleife durch eine Sammlung machen willst, verwendest du das map Konstrukt.

Auch wenn du eine Schleife durch ein Array oder eine Sammlung machst und eine Komponente renderst, verlangt React Native, dass du eine key, eine eindeutige ID für jede der untergeordneten Komponenten gibst, die gerendert wird. Deshalb sehen Sie eine Schlüsseleigenschaft in

<Text key={index}>

Wenn der Simulator aktualisiert wird…

Wir sehen fünf verschiedene zufällige Wallpaper-IDs, die angezeigt werden. Ändern Sie {wallpaper.id} zu {wallpaper.author} in renderResults und Sie sollten etwas wie das Folgende sehen.

Gut! Jetzt geht’s los. Wir sind jetzt in der Lage, die angegebene Anzahl (in diesem Fall fünf) zufälliger Tapeten aus der API abzurufen und zu filtern. Sieht so aus, als ob wir für diesen Abschnitt fertig sind. High five!

Hinzufügen der Swiper-Komponente

In diesem Abschnitt werden wir eine Swiper-Komponente in unsere App einfügen. Diese Komponente ermöglicht es uns, Hintergrundbilder in einem streichbaren Container anzuzeigen.

Sie werden lernen, wie Sie eine React Native-Komponente eines Drittanbieters in unsere App einbinden können. React Native hat eine erstaunliche Community-Unterstützung und auf GitHub gibt es eine reichhaltige Sammlung aller Arten von verschiedenen Drittanbieter-Komponenten.

Für unsere Zwecke werden wir react-native-swiper verwenden.

Gehen Sie im Terminal zum Projektverzeichnis und führen Sie den folgenden Befehl aus:

npm install react-native-swiper --save

Nun benötigen Sie die Swiper-Komponente: Fügen Sie var Swiper = require('react-native-swiper'); unter use strict ein.

Lassen Sie uns unsere neu eingebundene Swiper-Komponente ausprobieren.

Gehen Sie zur renderResults-Methode und ersetzen Sie View durch Swiper. Danach sollte Ihr renderResults wie folgt aussehen:

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

Das Ergebnis ist folgendes:

Anstatt die Namen der Autoren als Liste anzuzeigen, haben wir sie in einen Swiper gesetzt, der jedem Hintergrundbild einen eigenen Bildschirm gibt, über den wir streichen können. Hier müssen wir noch ein paar Dinge tun: Fügen Sie die folgenden Attribute zur Swiper-Komponente hinzu, wie gezeigt.

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

So geht’s:

• Stylt die Paginierungspunkte (macht die blauen Punkte, die Sie unten im vorherigen Bild sehen, weiß und größer).
• Deaktiviert das kontinuierliche Swipen (loop={false}). Das heißt, wenn du die letzte Seite erreichst und weiter wischst, wirst du nicht zum ersten Hintergrundbild zurückgebracht.
• Wird onMomentumScrollEnd (auf das wir im nächsten Teil des Tutorials näher eingehen werden) jedes Mal ausgelöst, wenn wir mit dem Wischen fertig sind.

Damit sind wir am Ende des ersten Teils angelangt. Was für eine Reise!

Zusammenfassung des React Native-Tutorials

• Im ersten Teil haben Sie gelernt, wie Sie ein leeres React Native-Projekt in Xcode einrichten.
• Im zweiten Teil haben wir über ES2015-Klassen gesprochen und warum Sie die neuere Syntax bevorzugen sollten, sowie über das Erstellen von Zustandsvariablen und das Abrufen von Rohdaten aus der API.
• Im dritten Teil haben wir uns mit dem dynamischen Rendering der App beschäftigt, das auf dem Wert einer Zustandsvariablen basiert. Außerdem haben wir eine leichte Flexbox-Positionierung vorgenommen.
• Im vierten Abschnitt haben wir ein brandneues Modul erstellt, um die Generierung von Zufallszahlen zu handhaben, und sind auch darauf eingegangen, wie man es in die Hauptdatei einbindet.
• Im letzten Abschnitt haben wir die erste Komponente eines Drittanbieters zu unserer App hinzugefügt, was dank Node ein Kinderspiel war.

Bis jetzt sieht unsere App, um ehrlich zu sein, nicht sehr besonders aus. Ich weiß. Im nächsten Teil werden wir tatsächliche Bilder statt nur Autorennamen hinzufügen. Außerdem werden wir einige fortgeschrittene Dinge tun, wie z. B. einen benutzerdefinierten Double-Tap-Detektor mit Hilfe der PanHandler API erstellen. Sie werden lernen, wie Sie eine Bibliothek in Xcode verknüpfen und Ihrer App Zugriff auf die Camera Roll gewähren. Wir werden auch unsere eigene Komponente erstellen und vieles mehr. Klingt interessant? Wir sehen uns im nächsten Teil.