Ich gehe also zum Produktübersichtsbildschirm, da ich, bevor ich einen Navigator hinzufüge,
zumindest etwas auf diesem Bildschirm
sehen möchte. Daher müssen wir hier jetzt den Verwendungsselektor aus React Redux importieren, da dies uns ermöglicht Tippen Sie auf den
Redux Store und holen Sie sich unsere Produkte von dort.
Am Ende können wir also unsere Produkte abrufen und in konstanten Produkten speichern, indem wir den Verwendungsselektor
aufrufen. Wie Sie im vorherigen
Modul über die Statusverwaltung in Redux erfahren haben, übernimmt der Verwendungsselektor eine Funktion, die den Status
automatisch empfängt , der Redux-Status als Eingabe, der dann alle Daten zurückgibt, die Sie von dort und dort im
Redux-Status erhalten möchten.
Ich möchte auf mein
Produkt-Slice tippen, und Sie müssen den Namen verwenden, den Sie hier in kombinierten Reduzierern verwenden, um dies zu
erhalten Zustand, die mit den Produkten für den Benutzer verwalteten Daten.
Also hier sage ich Staatsprodukte und jetzt in diesem Teil unseres Staates möchte ich verfügbare Produkte bekommen,
also lasst uns bekommen. Hier verfügbare Produkte und dies
ist diese kurze Pfeilfunktionssyntax, bei der der Teil auf der rechten Seite des Pfeils
automatisch zurückgegeben wird.
Das ist es also, was jetzt in Produkten gespeichert ist, und daher können wir
hier auf der flachen Liste natürlich die Datenstütze gleich unseren Produkten einstellen, die wir hier ausgewählt haben, da dies ein Array
sein wird und genau das, was Daten benötigen.
Ich werde hier auch den Schlüsselextraktor hinzufügen. Abhängig von der von Ihnen verwendeten Version von React Native
benötigen Sie diese nicht, da jedes Produkt in unserer App eine ID hat und neuere Versionen der flachen Liste auch nach ID suchen
und nicht nur nach Ein Schlüssel, aber wenn Sie mit einer älteren Version arbeiten, müssen Sie diese Schlüsselextraktionsfunktion einrichten. Dies erfordert eine Funktion,
die Ihnen das Element gibt, das Sie
sich ansehen, und Sie müssen ihm mitteilen, was Ihr eindeutiger Schlüssel dafür sein soll Artikel
und natürlich ist das Artikel. Auch neuere Versionen
von React Native benötigen das nicht. Jetzt müssen wir auch die Renderelement-Requisite bereitstellen,
die auf eine Funktion verweist, die unsere verschiedenen Listenelemente rendert. Hier fange ich einfach an und verfeinere
dies später und importiere sie im Moment einfach die Textkomponente von React Native und geben
Sie den Titel des Produkts in einer Textkomponente aus.
Hier erhalten wir also unsere Artikeldaten und der Rückgabewert dieser Funktion, die wir zum Rendern des
Artikels bereitstellen müssen, sollte am
Ende ein jsx-Element zurückgeben.
Also werde ich hier ein Textelement zurückgeben und dort itemData ausgeben. Artikel. Titel und ich können dies tun, weil
Artikeldaten von React Native empfangen werden, dies hat eine Artikelstütze, das ist auch etwas, was React Native Ihnen
gibt, und jeder Artikel hier ist natürlich nur ein Artikel in unseren Produkten,
daher ist er von dieser Art Daten und daher hat es natürlich eine Titel-Requisite, weil ich das hier
zuweisen werde, also
werden wir hier eine Titel-Requisite haben, die ich ausgeben kann, und natürlich ist dies nicht die
endgültige Form, wie ein Produkt aussehen sollte die Liste, aber es ist das, was ich
benutze, um loszulegen, damit wir etwas auf dem Bildschirm sehen. Wenn wir vom Bildschirm sprechen, ist es natürlich an der Zeit, den Navigator
so einzurichten, dass wir wirklich etwas auf dem Bildschirm sehen können und dass wir Bildschirme haben.
Daher werde ich hier im Navigationsordner meinen ShopNavigator hinzufügen. js Datei und dort werden wir eine Reihe
von Navigationen in diesem Modul hinzufügen, so dass wir definitiv aus React Navigation importieren müssen und ich werde natürlich einfach
mit einem normalen Stack-Navigator beginnen, den wir mit Hilfe von erstellen können Funktion zum Erstellen eines
Stapelnavigators und dann erstellen wir sie einfach hier und ich nenne sie den Produktnavigator. Das ist
es, was ich hier
speichere. Das
Ergebnis der Erstellung des Stapelnavigators und das Ergebnis ist eine Reaktionskomponente, wenn Sie sich
erinnern und wenn Sie sich auch erinnern , create stack navigator verwendet ein Javascript-Objekt als erstes Argument,
bei dem wir Bildschirmkennungen React-Komponenten zuordnen, die als Bildschirme geladen werden sollen.
Hier beginne ich natürlich mit dem Produktübersichtsbildschirm und importiere diesen aus dem Bildschirmordner und
dort aus dem Shop-Teil und dort aus der Produktübersichtsbildschirmdatei. Daher ist das erste, was ich in
diesem Stapelnavigator hier zuordnen
möchte, Produkte Übersicht oder wie auch immer Sie dies benennen möchten, die dem Produktübersichtsbildschirm zugeordnet
ist.
Natürlich werde ich für diesen Stapelnavigator, der irgendwann mehrere Bildschirme haben wird, auch ein zweites Argument übergeben,
um einen Stapelnavigator zu erstellen, ein Objekt, mit dem wir den gesamten Navigator
konfigurieren können und für das wir beispielsweise Standardnavigationsoptionen einrichten können Auf jedem Bildschirm und
dort möchte ich meine Header-Hintergrundfarbe einrichten und so weiter.
Also werde ich hier ein Javascript-Objekt einrichten, in dem ich den Header-Stil auf ein anderes Javascript-Objekt festlegen kann, in dem wir die Hintergrundfarbe
auf eine beliebige Farbe Ihrer Wahl festlegen können. Dort kommt nun der Ordner
"Konstanten" ins Spiel, den ich hinzufügen werde eine Farbe. js-Datei, in der ich einfach ein Standard-Javascript-Objekt mit
einer Primärfarbe und einer Akzentfarbe exportieren möchte und Sie diese Schlüssel beliebig benennen können. Jetzt habe ich einige
schöne Farben ausgewählt, die ich
hier verwenden möchte, aber Sie können jede Farbe verwenden, die Sie verwenden wollen.
Meine Primärfarbe ist der Hex-Code # c2185b und die Akzentfarbe den
Hex-Code # ffc107.
Jetzt also zurück im Shop-Navigator können wir aus diesem Konstantenordner importieren, immer noch aus Farben,
die wir im Konstantenordner wie diesen finden, und hier ist die Hintergrundfarbe, die ich hier für
einen Header-Stil einrichten werde, Farben. primär.
Nachdem dies hinzugefügt wurde, füge ich
auch eine Kopffarbe hinzu, die beispielsweise den Titeltext färbt, und setze diese auf Weiß, da diese
von mir eingerichtete Primärfarbe einer ziemlich starken rosa-rötlichen Farbe entspricht und daher Weiß ist Die Farbe, die wir
verwenden sollten, damit sie gut lesbar ist, und ich möchte tatsächlich unterscheiden, wie der Header basierend auf
der Plattform aussieht, auf der wir ausgeführt werden.
Es ist also an der Zeit, die Plattform aus React Native zu importieren. In dieser Übungs-App werde ich mich nicht
zu sehr auf Plattformunterschiede und reaktionsschnelles Design konzentrieren. Ich werde dies bis zu einem
gewissen Grad tun, damit es einen grundlegenden Unterschied gibt die verschiedenen Plattformen und dass
die App auf verschiedenen Gerätegrößen gut aussieht, aber
ich werde sie nicht auf einer Vielzahl von Gerätegrößen testen.
Sie haben alles gelernt, was Sie brauchen, um es so reaktionsschnell wie möglich zu
gestalten. Sie können dies also auf jeden Fall immer weiter optimieren, als ich es hier in diesem Modul tue.
Am Ende möchte ich nur sicherstellen, dass dieses Modul nicht Hunderte von Stunden dauert, deshalb
werde ich dies auf ein Minimum beschränken.
Mit diesem Set scheint mir die Plattform hier wichtig zu sein, da ich den Header
wirklich anders sehen möchte, je nachdem, ob wir auf iOS oder Android laufen.
Die Hintergrundfarbe ist also nicht immer die Primärfarbe, sondern ich werde sie nur einstellen, wenn
das Betriebssystem, auf dem wir laufen, Android ist.
Andernfalls setze ich die Hintergrundfarbe auf eine leere Zeichenfolge, was bedeutet, dass die Standardeinstellung
übernommen wird und
daher Für die Header-Tönungsfarbe sollte
dies auch nur Weiß sein, wenn wir unter Android arbeiten. Andernfalls setze ich es nicht auf eine leere
Zeichenfolge, sondern möchte die Primärfarbe unter iOS
als Textfarbe verwenden Wir sind nicht auf Android. Damit ist der Produktnavigator eingerichtet.
Wie Sie im Navigationsmodul erfahren haben, exportieren Sie diesen Navigator nicht mehr, sondern
verpacken ihn in einen App-Container, den Sie mit der Funktion "App-Container erstellen" erstellen, die Sie
von der React-Navigation erhalten.
Hier können wir nun den Standard-App-Container zum Erstellen exportieren und den Produktnavigator wie folgt übergeben.
Dies ist jetzt die eingerichtete Exportnavigation, die wir jetzt in
der App verwenden können. js.
Also in App. js, wir können jetzt unseren Shop-Navigator
aus Navigation, Shop-Navigator importieren und das verwende ich jetzt in meinen Provider-Tags hier,
also gefällt der Shop-Navigator so. Dies bedeutet auch, dass wir diese React Native-Importe entfernen
können, da wir keine dieser React Native-Komponenten mehr in dieser Komponente verwenden. Mit all dieser Arbeit sollten wir nun
in der Lage sein, unsere App tatsächlich auszuführen und hoffentlich auf dem Produktübersichtsbildschirm zu landen,
auf dem wir eine grundlegende, nicht gestaltete Liste von Produkttiteln sehen.
Wenn ich das jetzt speichere, alle diese Änderungen speichere und Sie sicherstellen, dass npm gestartet wird und
Emulatoren dort ausgeführt werden, wo Sie dies
geladen haben, wird die Fehlermeldung angezeigt, dass das Objekt kein Konstruktor ist und die Standardeinstellung für neue Produkte bewertet.
Das Problem sollte sein, dass ich in meinem Modellordner hier vergessen habe, meine Produktklasse standardmäßig zu exportieren.
Das muss natürlich hier hinzugefügt
werden, sonst kann man nicht aus dieser
Datei importieren, macht Sinn.
Jetzt funktioniert das und
jetzt sehe ich meine Produkttitel.
Wir sehen auch die verschiedenen Header. Was
wir nicht sehen, ist ein Header-Titel, weil ich keinen hinzugefügt habe. Daher können wir im Produktübersichtsbildschirm
natürlich nur Navigationsoptionen für unseren speziellen Bildschirm hinzufügen, die mit den Standardnavigationsoptionen zusammengeführt
werden, die wir direkt im Navigator eingerichtet haben, indem wir den Produktübersichtsbildschirm verwenden, unsere Konstante
hier, die unsere Komponente enthält, und das Hinzufügen der Eigenschaft "Navigationsoptionen" und
hier können wir momentan statische Navigationsoptionen verwenden, einen Headertitel hinzufügen und diesen beispielsweise für alle Produkte festlegen.
Wenn wir dies
jetzt speichern, werden alle Produkte hier in der Header angezeigt.
Das sieht jetzt eigentlich anständig aus, wir können unsere Produkte sehen.
Natürlich sehen diese Produkte nicht so aus, wie sie aussehen sollten.
Der nächste Schritt besteht darin, sicherzustellen, dass wir hier tatsächlich das Aussehen erhalten, das wir in dieser Anwendung benötigen.