So erstellen Sie einen News Reader mit React Native Webseiten-Komponente

Im ersten Teil dieser Serie haben Sie gelernt, wie Sie React Native auf Ihrem Computer einrichten, benutzerdefinierte Komponenten erstellen und verwenden und Bibliotheken von Drittanbietern, z. B. moment.js, verwenden. In diesem Lernprogramm erfahren Sie, wie Sie Netzwerkanfragen mit machen holen, eine Webseite mit dem integrierten rendern WebView Komponente und führen Sie die App auf einem physischen Gerät aus.

1. API-Wrapper abrufen

Im ersten Teil dieser Serie haben wir die api Funktion, aber wir haben es noch nicht definiert. Beginnen Sie mit dem Erstellen eines src Verzeichnis und fügen Sie eine Datei hinzu, api.js. Öffnen Sie die Datei und fügen Sie Folgendes hinzu:

module.exports = function (url) return fetch (url). dann (funktion (antwort) return response.json ();). then (funktion (json) return json;); 

Diese Datei verwendet die holen Funktion, die standardmäßig in React Native verfügbar ist. Mit dieser Funktion kann die App Netzwerkanfragen durchführen. Wenn Sie jQuery verwendet haben, ähnelt es dem $ .ajax Funktion. Sie geben eine URL und einige optionale Daten an und erhalten eine Antwort zurück.

Der einzige Unterschied ist, dass Sie etwas zusätzliche Arbeit erledigen müssen. Die Funktion zum Erfassen des ersten Versprechens gibt die Rohantwort zurück, dh, Sie müssen das aufrufen Json Methode auf der Antwort um das Versprechen zu erhalten, das den JSON-String zurückgibt. Sie müssen also das Ergebnis zurückgeben und das Versprechen einnehmen, indem Sie die dann Funktion erneut und übergeben Sie die Funktion, die aufgerufen wird, sobald das Versprechen aufgelöst wird.

Die JSON-Zeichenfolge wird dann als Argument an diese Funktion übergeben, sodass wir sie nur zurückgeben. Das holen Methode gibt ein Versprechen zurück, wenn wir das aufrufen api Methode müssen wir noch die aufrufen dann Methode, um die tatsächliche Antwort zu erfassen, genau wie wir es im ersten Teil dieser Serie getan haben.

api (story_url) .then ((story) => …);

2. Website Komponente

Das Website Die Komponente ist für das Rendern einer Webseite verantwortlich. Es verwendet die WebView Komponente dazu.

var React = erfordern ('reag-native'); var AppRegistry, StyleSheet, Text, Ansicht, WebView = React; var Button = erfordern ('reaktiver-Button'); var GiftedSpinner = erfordern ('reag-native-gifted-spinner'); var _ = requir ('lodash'); var WebPage = React.createClass (getInitialState: function () return isLoading: true;, render: function () return (   Zurück   this.truncate (this.state.pageTitle)   this.state.isLoading &&        ); , truncate: function (str) return _.truncate (str, 20); , onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); , zurück: function () this.props.navigator.pop (); ); var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600'), flex: 1, justifyContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, Schaltfläche: textAlign: 'left', Farbe: '#FFF', page_title: color: '#FFF ', Spinner: alignItems:' flex-end '); module.exports = WebPage;

Erstens führen wir einige Reinigungsaufgaben durch, indem wir die benötigten Variablen erstellen und die verwendeten Bibliotheken benötigen.

var React = erfordern ('reag-native'); var AppRegistry, StyleSheet, Text, Ansicht, WebView = React; var Button = erfordern ('reaktiver-Button'); var GiftedSpinner = erfordern ('reag-native-gifted-spinner'); var _ = requir ('lodash');

Als nächstes erstellen wir die Website Komponente.

var WebPage = React.createClass (…);

Legen wir fest ladet zu wahr als Standardzustand. Diese Eigenschaft ist für die Entscheidung verantwortlich, ob der Spinner angezeigt werden soll oder nicht. Standardmäßig sollte der Spinner sichtbar sein, um anzuzeigen, dass die Seite geladen wird.

getInitialState: function () return isLoading: true; ,

Als Nächstes rendern wir die Komponente. Wie die Nachrichtenkomponente hat auch diese eine Kopfzeile und einen Hauptteil. Die Kopfzeile enthält eine Schaltfläche "Zurück", den Titel der Seite und einen Spinner.

rendern: function () return (   Zurück   this.truncate (this.state.pageTitle)   this.state.isLoading &&        ); ,

Der Körper enthält das WebView Komponente. Das WebView Komponente hat eine url und onNavigationStateChange Attribute. Das url ist die URL, die von übergeben wurde viewPage Funktion in der NewsItems Komponente früher. Wenn also der folgende Code ausgeführt wird:

this.props.navigator.push (name: 'web_page', url: url);

Das RenderScene Methode in index.android.js wird auch ausgeführt und die URL wird an sie übergeben:

renderScene: Funktion (Route, Navigator) var Komponente = ROUTES [route.name]; Rückkehr (  ); ,

So haben wir Zugriff auf die URL, indem wir sie aus den Requisiten extrahieren: this.props.url.

Gehen wir zurück zu den Attributen, die dem hinzugefügt wurden WebView Komponente. Wir haben das onNavigationStateChange Attribut, das zum Angeben der Funktion verwendet wird, die ausgeführt wird, wenn die Webansicht zu einer neuen Seite navigiert. So sieht diese Funktion aus:

onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); ,

Wenn die obige Funktion aufgerufen wird, wird die navState wird als Argument weitergegeben. Diese enthält Informationen zum aktuellen Status der Webansicht, z. B. den Titel der Seite und ob sie gerade geladen wird. Dies ist der perfekte Ort, um den Zustand zu aktualisieren. Wenn die Seite nicht mehr geladen wird, legen wir fest ladet zu falsch und einen Wert für die Seitentitel.

Als nächstes haben wir die zurück Funktion, wodurch der Navigator eine Seite zurückgeht. Dieser wird aufgerufen, wenn der Benutzer auf die Schaltfläche "Zurück" in der Kopfzeile tippt.

zurück: function () this.props.navigator.pop (); 

Das kürzen Funktion begrenzt die Länge dessen, was an die Funktion übergeben wird. Wir verwenden diese Funktion, um den Text für den Seitentitel der Webseite einzuschränken.

kürzen: function (str) return _.truncate (str, 20); ,

Das Stylesheet sieht folgendermaßen aus:

var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600'), flex: 1, justifyContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, Schaltfläche: textAlign: 'left', Farbe: '#FFF', page_title: color: '#FFF ', Spinner: alignItems:' flex-end ');

Zum Schluss setzen Sie die Komponente der Außenwelt aus:

module.exports = WebPage;

3. App ausführen

Um die App auszuführen, benötigen Sie ein Android-Gerät oder einen Emulator. Wenn Sie einen Emulator verwenden möchten, empfehle ich die Verwendung von Genymotion. Sie können die App ausführen, indem Sie den folgenden Befehl ausführen:

reag-native run-android

Dieser Befehl installiert und startet die App. Sie erhalten jedoch die folgende Fehlermeldung, wenn Sie dies versuchen:

Dies liegt daran, dass React Native erwartet, dass der React-Server auf Ihrem Computer ausgeführt wird. Der React-Server kompiliert die App jedes Mal, wenn Sie die Änderungen in Ihrem Texteditor speichern. Das reag-native run-android Der Befehl wird nur zum Ausführen der App zum Testen und Debuggen der App verwendet. Aus diesem Grund ist der React-Server für das Kompilieren der App erforderlich.

Um den Fehler zu beseitigen, müssen Sie das ausführen reaktiver Start Befehl zum Starten des Servers. Dies dauert beim ersten Durchgang eine Weile, aber wenn es zu dem Teil kommt, in dem Folgendes angezeigt wird:

 Abhängigkeitsdiagramm der Gebäude (35135ms)

Sie können ein neues Terminalfenster in Ihrem Projektverzeichnis öffnen und ausführen adb-shell-eingabe keyevent 82. Dadurch wird das Entwicklermenü im Gerät oder Emulator geöffnet. Wenn das Menü geöffnet ist, wählen Sie dev einstellungen dann auswählen Debug-Server-Host und -Port.

Daraufhin werden Sie aufgefordert, die IP-Adresse und den Port Ihres Computers einzugeben. Ermitteln Sie die interne IP-Adresse Ihres Computers und geben Sie diese zusammen mit dem Port in die Eingabeaufforderung ein 8081, Dies ist der Standardport, auf dem der React Server ausgeführt wird. Mit anderen Worten, wenn Ihre IP-Adresse lautet 192.168.254.254, dann eingeben 192.168.254.254:8081.

Gehen Sie danach zurück zum Entwicklermenü und wählen Sie JS neu laden. Dadurch wird die App neu geladen, sodass sie die laufende React-Serverinstanz erkennt. Die App sollte ohne Probleme funktionieren.

Wenn Sie auf einem iOS-Gerät testen möchten, befolgen Sie die Anweisungen auf der React Native-Website.

4. Nächste Schritte

Wir haben mit React Native eine hübsche Newsreader-App erstellt. Was kommt als nächstes? Hier sind ein paar Ideen, wenn Sie mehr über React Native erfahren möchten:

• Verbessern Sie den Code, indem Sie die App in einige weitere wiederverwendbare Komponenten unterteilen. Beginnen Sie mit einem Blick auf duplizierten Code. In der von uns erstellten App haben wir beispielsweise den Header und die darin enthaltenen Komponenten dupliziert. Sie können eine Header-Komponente erstellen, die den Titel als Eigenschaft akzeptiert und diese dann auf jeder Seite benötigt, auf der Sie einen Header benötigen.
• Verbessern Sie die Antwortzeit der App, indem Sie einen Server erstellen, der die Elemente aus der Hacker News API zwischenspeichert. Dadurch können Sie nur eine Netzwerkanforderung ausführen, die alle Nachrichten enthält, anstatt mehrere Netzwerkanfragen wie in diesem Lernprogramm ausführen zu müssen.
• Generieren Sie eine signierte APK, damit Sie die App bei Google Play verteilen können. Für iOS können Sie Xcode verwenden, um Ihre App im App Store von Apple zu verteilen.
• Durchsuchen Sie die Dokumentation für APIs, die auf native Gerätefunktionen wie die Kamera zugreifen.
• Schauen Sie sich das Awesome React Native-Repo auf Github an. Dieses Repo enthält eine Liste von Komponenten, Ressourcen und Tools, die Sie mit React Native verwenden können.
• Wenn Sie sich über Neuigkeiten zu React Native auf dem Laufenden halten möchten, abonnieren Sie den React Native-Newsletter.

Fazit

Das ist es. In diesem Lernprogramm haben Sie erfahren, wie Sie mit React Native eine Newsreader-App erstellen, die mit der Hacker News API kommuniziert. Wenn Sie Fragen haben, lassen Sie sie in den folgenden Kommentaren fallen und ich versuche mein Bestes, um sie zu beantworten. Sie finden die Quelldateien dieses Tutorials auf GitHub. Danke fürs Lesen.