1 00:00:02,120 --> 00:00:07,100 Ich gehe also zum Produktübersichtsbildschirm, da ich, bevor ich einen Navigator hinzufüge, 2 00:00:07,100 --> 00:00:09,590 zumindest etwas auf diesem Bildschirm 3 00:00:09,590 --> 00:00:18,380 sehen möchte. Daher müssen wir hier jetzt den Verwendungsselektor aus React Redux importieren, da dies uns ermöglicht Tippen Sie auf den 4 00:00:18,380 --> 00:00:22,630 Redux Store und holen Sie sich unsere Produkte von dort. 5 00:00:22,640 --> 00:00:28,790 Am Ende können wir also unsere Produkte abrufen und in konstanten Produkten speichern, indem wir den Verwendungsselektor 6 00:00:28,790 --> 00:00:30,800 aufrufen. Wie Sie im vorherigen 7 00:00:30,800 --> 00:00:36,950 Modul über die Statusverwaltung in Redux erfahren haben, übernimmt der Verwendungsselektor eine Funktion, die den Status 8 00:00:36,950 --> 00:00:44,060 automatisch empfängt , der Redux-Status als Eingabe, der dann alle Daten zurückgibt, die Sie von dort und dort im 9 00:00:44,060 --> 00:00:45,470 Redux-Status erhalten möchten. 10 00:00:45,770 --> 00:00:47,360 Ich möchte auf mein 11 00:00:47,360 --> 00:00:53,780 Produkt-Slice tippen, und Sie müssen den Namen verwenden, den Sie hier in kombinierten Reduzierern verwenden, um dies zu 12 00:00:53,990 --> 00:00:57,990 erhalten Zustand, die mit den Produkten für den Benutzer verwalteten Daten. 13 00:00:58,010 --> 00:01:05,180 Also hier sage ich Staatsprodukte und jetzt in diesem Teil unseres Staates möchte ich verfügbare Produkte bekommen, 14 00:01:06,220 --> 00:01:10,270 also lasst uns bekommen. Hier verfügbare Produkte und dies 15 00:01:10,270 --> 00:01:15,460 ist diese kurze Pfeilfunktionssyntax, bei der der Teil auf der rechten Seite des Pfeils 16 00:01:15,460 --> 00:01:17,020 automatisch zurückgegeben wird. 17 00:01:17,020 --> 00:01:21,870 Das ist es also, was jetzt in Produkten gespeichert ist, und daher können wir 18 00:01:21,880 --> 00:01:28,870 hier auf der flachen Liste natürlich die Datenstütze gleich unseren Produkten einstellen, die wir hier ausgewählt haben, da dies ein Array 19 00:01:28,870 --> 00:01:31,790 sein wird und genau das, was Daten benötigen. 20 00:01:31,810 --> 00:01:36,730 Ich werde hier auch den Schlüsselextraktor hinzufügen. Abhängig von der von Ihnen verwendeten Version von React Native 21 00:01:36,790 --> 00:01:43,450 benötigen Sie diese nicht, da jedes Produkt in unserer App eine ID hat und neuere Versionen der flachen Liste auch nach ID suchen 22 00:01:43,450 --> 00:01:49,900 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, 23 00:01:49,900 --> 00:01:51,940 die Ihnen das Element gibt, das Sie 24 00:01:51,940 --> 00:01:56,230 sich ansehen, und Sie müssen ihm mitteilen, was Ihr eindeutiger Schlüssel dafür sein soll Artikel 25 00:01:56,230 --> 00:02:00,100 und natürlich ist das Artikel. Auch neuere Versionen 26 00:02:00,160 --> 00:02:07,410 von React Native benötigen das nicht. Jetzt müssen wir auch die Renderelement-Requisite bereitstellen, 27 00:02:07,410 --> 00:02:14,720 die auf eine Funktion verweist, die unsere verschiedenen Listenelemente rendert. Hier fange ich einfach an und verfeinere 28 00:02:14,720 --> 00:02:21,650 dies später und importiere sie im Moment einfach die Textkomponente von React Native und geben 29 00:02:21,650 --> 00:02:25,590 Sie den Titel des Produkts in einer Textkomponente aus. 30 00:02:25,610 --> 00:02:31,580 Hier erhalten wir also unsere Artikeldaten und der Rückgabewert dieser Funktion, die wir zum Rendern des 31 00:02:31,580 --> 00:02:33,580 Artikels bereitstellen müssen, sollte am 32 00:02:33,900 --> 00:02:35,780 Ende ein jsx-Element zurückgeben. 33 00:02:35,810 --> 00:02:42,890 Also werde ich hier ein Textelement zurückgeben und dort itemData ausgeben. Artikel. Titel und ich können dies tun, weil 34 00:02:42,890 --> 00:02:48,680 Artikeldaten von React Native empfangen werden, dies hat eine Artikelstütze, das ist auch etwas, was React Native Ihnen 35 00:02:48,680 --> 00:02:53,000 gibt, und jeder Artikel hier ist natürlich nur ein Artikel in unseren Produkten, 36 00:02:53,000 --> 00:02:58,640 daher ist er von dieser Art Daten und daher hat es natürlich eine Titel-Requisite, weil ich das hier 37 00:02:58,640 --> 00:02:59,830 zuweisen werde, also 38 00:02:59,960 --> 00:03:05,300 werden wir hier eine Titel-Requisite haben, die ich ausgeben kann, und natürlich ist dies nicht die 39 00:03:05,300 --> 00:03:10,100 endgültige Form, wie ein Produkt aussehen sollte die Liste, aber es ist das, was ich 40 00:03:10,100 --> 00:03:16,900 benutze, um loszulegen, damit wir etwas auf dem Bildschirm sehen. Wenn wir vom Bildschirm sprechen, ist es natürlich an der Zeit, den Navigator 41 00:03:16,900 --> 00:03:20,920 so einzurichten, dass wir wirklich etwas auf dem Bildschirm sehen können und dass wir Bildschirme haben. 42 00:03:21,160 --> 00:03:28,240 Daher werde ich hier im Navigationsordner meinen ShopNavigator hinzufügen. js Datei und dort werden wir eine Reihe 43 00:03:28,240 --> 00:03:36,020 von Navigationen in diesem Modul hinzufügen, so dass wir definitiv aus React Navigation importieren müssen und ich werde natürlich einfach 44 00:03:36,050 --> 00:03:42,470 mit einem normalen Stack-Navigator beginnen, den wir mit Hilfe von erstellen können Funktion zum Erstellen eines 45 00:03:42,470 --> 00:03:48,740 Stapelnavigators und dann erstellen wir sie einfach hier und ich nenne sie den Produktnavigator. Das ist 46 00:03:48,860 --> 00:03:50,280 es, was ich hier 47 00:03:50,420 --> 00:03:51,700 speichere. Das 48 00:03:51,710 --> 00:03:57,320 Ergebnis der Erstellung des Stapelnavigators und das Ergebnis ist eine Reaktionskomponente, wenn Sie sich 49 00:03:57,320 --> 00:04:03,800 erinnern und wenn Sie sich auch erinnern , create stack navigator verwendet ein Javascript-Objekt als erstes Argument, 50 00:04:03,860 --> 00:04:08,710 bei dem wir Bildschirmkennungen React-Komponenten zuordnen, die als Bildschirme geladen werden sollen. 51 00:04:08,810 --> 00:04:16,040 Hier beginne ich natürlich mit dem Produktübersichtsbildschirm und importiere diesen aus dem Bildschirmordner und 52 00:04:16,040 --> 00:04:23,930 dort aus dem Shop-Teil und dort aus der Produktübersichtsbildschirmdatei. Daher ist das erste, was ich in 53 00:04:24,020 --> 00:04:26,120 diesem Stapelnavigator hier zuordnen 54 00:04:26,120 --> 00:04:33,630 möchte, Produkte Übersicht oder wie auch immer Sie dies benennen möchten, die dem Produktübersichtsbildschirm zugeordnet 55 00:04:33,640 --> 00:04:34,800 ist. 56 00:04:34,790 --> 00:04:41,510 Natürlich werde ich für diesen Stapelnavigator, der irgendwann mehrere Bildschirme haben wird, auch ein zweites Argument übergeben, 57 00:04:41,510 --> 00:04:46,790 um einen Stapelnavigator zu erstellen, ein Objekt, mit dem wir den gesamten Navigator 58 00:04:47,180 --> 00:04:52,550 konfigurieren können und für das wir beispielsweise Standardnavigationsoptionen einrichten können Auf jedem Bildschirm und 59 00:04:52,550 --> 00:04:56,660 dort möchte ich meine Header-Hintergrundfarbe einrichten und so weiter. 60 00:04:57,350 --> 00:05:05,060 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 61 00:05:05,060 --> 00:05:09,620 auf eine beliebige Farbe Ihrer Wahl festlegen können. Dort kommt nun der Ordner 62 00:05:09,620 --> 00:05:16,000 "Konstanten" ins Spiel, den ich hinzufügen werde eine Farbe. js-Datei, in der ich einfach ein Standard-Javascript-Objekt mit 63 00:05:16,010 --> 00:05:23,330 einer Primärfarbe und einer Akzentfarbe exportieren möchte und Sie diese Schlüssel beliebig benennen können. Jetzt habe ich einige 64 00:05:23,330 --> 00:05:25,760 schöne Farben ausgewählt, die ich 65 00:05:25,760 --> 00:05:30,730 hier verwenden möchte, aber Sie können jede Farbe verwenden, die Sie verwenden wollen. 66 00:05:30,920 --> 00:05:42,890 Meine Primärfarbe ist der Hex-Code # c2185b und die Akzentfarbe den 67 00:05:42,890 --> 00:05:46,940 Hex-Code # ffc107. 68 00:05:47,130 --> 00:05:52,920 Jetzt also zurück im Shop-Navigator können wir aus diesem Konstantenordner importieren, immer noch aus Farben, 69 00:05:54,020 --> 00:06:00,230 die wir im Konstantenordner wie diesen finden, und hier ist die Hintergrundfarbe, die ich hier für 70 00:06:00,230 --> 00:06:04,240 einen Header-Stil einrichten werde, Farben. primär. 71 00:06:04,250 --> 00:06:07,470 Nachdem dies hinzugefügt wurde, füge ich 72 00:06:07,530 --> 00:06:15,630 auch eine Kopffarbe hinzu, die beispielsweise den Titeltext färbt, und setze diese auf Weiß, da diese 73 00:06:16,470 --> 00:06:24,900 von mir eingerichtete Primärfarbe einer ziemlich starken rosa-rötlichen Farbe entspricht und daher Weiß ist Die Farbe, die wir 74 00:06:24,900 --> 00:06:33,080 verwenden sollten, damit sie gut lesbar ist, und ich möchte tatsächlich unterscheiden, wie der Header basierend auf 75 00:06:33,080 --> 00:06:37,110 der Plattform aussieht, auf der wir ausgeführt werden. 76 00:06:37,160 --> 00:06:44,450 Es ist also an der Zeit, die Plattform aus React Native zu importieren. In dieser Übungs-App werde ich mich nicht 77 00:06:44,450 --> 00:06:49,700 zu sehr auf Plattformunterschiede und reaktionsschnelles Design konzentrieren. Ich werde dies bis zu einem 78 00:06:49,700 --> 00:06:55,160 gewissen Grad tun, damit es einen grundlegenden Unterschied gibt die verschiedenen Plattformen und dass 79 00:06:55,190 --> 00:06:58,580 die App auf verschiedenen Gerätegrößen gut aussieht, aber 80 00:06:58,790 --> 00:07:02,630 ich werde sie nicht auf einer Vielzahl von Gerätegrößen testen. 81 00:07:02,660 --> 00:07:06,910 Sie haben alles gelernt, was Sie brauchen, um es so reaktionsschnell wie möglich zu 82 00:07:06,980 --> 00:07:12,230 gestalten. Sie können dies also auf jeden Fall immer weiter optimieren, als ich es hier in diesem Modul tue. 83 00:07:12,230 --> 00:07:16,710 Am Ende möchte ich nur sicherstellen, dass dieses Modul nicht Hunderte von Stunden dauert, deshalb 84 00:07:16,730 --> 00:07:19,250 werde ich dies auf ein Minimum beschränken. 85 00:07:19,250 --> 00:07:24,080 Mit diesem Set scheint mir die Plattform hier wichtig zu sein, da ich den Header 86 00:07:24,440 --> 00:07:28,790 wirklich anders sehen möchte, je nachdem, ob wir auf iOS oder Android laufen. 87 00:07:28,790 --> 00:07:34,940 Die Hintergrundfarbe ist also nicht immer die Primärfarbe, sondern ich werde sie nur einstellen, wenn 88 00:07:34,940 --> 00:07:38,320 das Betriebssystem, auf dem wir laufen, Android ist. 89 00:07:38,360 --> 00:07:43,820 Andernfalls setze ich die Hintergrundfarbe auf eine leere Zeichenfolge, was bedeutet, dass die Standardeinstellung 90 00:07:43,820 --> 00:07:45,540 übernommen wird und 91 00:07:45,570 --> 00:07:47,420 daher Für die Header-Tönungsfarbe sollte 92 00:07:47,450 --> 00:07:54,780 dies auch nur Weiß sein, wenn wir unter Android arbeiten. Andernfalls setze ich es nicht auf eine leere 93 00:07:54,780 --> 00:07:57,720 Zeichenfolge, sondern möchte die Primärfarbe unter iOS 94 00:07:57,720 --> 00:08:04,150 als Textfarbe verwenden Wir sind nicht auf Android. Damit ist der Produktnavigator eingerichtet. 95 00:08:04,200 --> 00:08:09,240 Wie Sie im Navigationsmodul erfahren haben, exportieren Sie diesen Navigator nicht mehr, sondern 96 00:08:09,240 --> 00:08:14,940 verpacken ihn in einen App-Container, den Sie mit der Funktion "App-Container erstellen" erstellen, die Sie 97 00:08:14,940 --> 00:08:16,970 von der React-Navigation erhalten. 98 00:08:16,980 --> 00:08:24,510 Hier können wir nun den Standard-App-Container zum Erstellen exportieren und den Produktnavigator wie folgt übergeben. 99 00:08:24,510 --> 00:08:27,510 Dies ist jetzt die eingerichtete Exportnavigation, die wir jetzt in 100 00:08:27,630 --> 00:08:30,240 der App verwenden können. js. 101 00:08:30,510 --> 00:08:37,260 Also in App. js, wir können jetzt unseren Shop-Navigator 102 00:08:39,770 --> 00:08:46,700 aus Navigation, Shop-Navigator importieren und das verwende ich jetzt in meinen Provider-Tags hier, 103 00:08:46,700 --> 00:08:52,670 also gefällt der Shop-Navigator so. Dies bedeutet auch, dass wir diese React Native-Importe entfernen 104 00:08:52,700 --> 00:09:00,020 können, da wir keine dieser React Native-Komponenten mehr in dieser Komponente verwenden. Mit all dieser Arbeit sollten wir nun 105 00:09:00,020 --> 00:09:07,130 in der Lage sein, unsere App tatsächlich auszuführen und hoffentlich auf dem Produktübersichtsbildschirm zu landen, 106 00:09:07,130 --> 00:09:12,390 auf dem wir eine grundlegende, nicht gestaltete Liste von Produkttiteln sehen. 107 00:09:12,470 --> 00:09:17,840 Wenn ich das jetzt speichere, alle diese Änderungen speichere und Sie sicherstellen, dass npm gestartet wird und 108 00:09:17,840 --> 00:09:20,520 Emulatoren dort ausgeführt werden, wo Sie dies 109 00:09:20,870 --> 00:09:26,980 geladen haben, wird die Fehlermeldung angezeigt, dass das Objekt kein Konstruktor ist und die Standardeinstellung für neue Produkte bewertet. 110 00:09:26,980 --> 00:09:35,270 Das Problem sollte sein, dass ich in meinem Modellordner hier vergessen habe, meine Produktklasse standardmäßig zu exportieren. 111 00:09:35,300 --> 00:09:36,970 Das muss natürlich hier hinzugefügt 112 00:09:36,980 --> 00:09:39,250 werden, sonst kann man nicht aus dieser 113 00:09:39,290 --> 00:09:40,640 Datei importieren, macht Sinn. 114 00:09:40,640 --> 00:09:42,670 Jetzt funktioniert das und 115 00:09:42,740 --> 00:09:44,780 jetzt sehe ich meine Produkttitel. 116 00:09:44,780 --> 00:09:46,420 Wir sehen auch die verschiedenen Header. Was 117 00:09:46,430 --> 00:09:51,500 wir nicht sehen, ist ein Header-Titel, weil ich keinen hinzugefügt habe. Daher können wir im Produktübersichtsbildschirm 118 00:09:51,500 --> 00:09:57,770 natürlich nur Navigationsoptionen für unseren speziellen Bildschirm hinzufügen, die mit den Standardnavigationsoptionen zusammengeführt 119 00:09:57,770 --> 00:10:04,490 werden, die wir direkt im Navigator eingerichtet haben, indem wir den Produktübersichtsbildschirm verwenden, unsere Konstante 120 00:10:04,490 --> 00:10:10,050 hier, die unsere Komponente enthält, und das Hinzufügen der Eigenschaft "Navigationsoptionen" und 121 00:10:10,070 --> 00:10:17,870 hier können wir momentan statische Navigationsoptionen verwenden, einen Headertitel hinzufügen und diesen beispielsweise für alle Produkte festlegen. 122 00:10:17,870 --> 00:10:19,630 Wenn wir dies 123 00:10:19,810 --> 00:10:24,470 jetzt speichern, werden alle Produkte hier in der Header angezeigt. 124 00:10:24,680 --> 00:10:28,870 Das sieht jetzt eigentlich anständig aus, wir können unsere Produkte sehen. 125 00:10:28,970 --> 00:10:32,720 Natürlich sehen diese Produkte nicht so aus, wie sie aussehen sollten. 126 00:10:32,720 --> 00:10:38,810 Der nächste Schritt besteht darin, sicherzustellen, dass wir hier tatsächlich das Aussehen erhalten, das wir in dieser Anwendung benötigen.