1 00:00:02,070 --> 00:00:07,410 Daher möchte ich auf dem Bildschirm mit der Ortsliste nicht überraschend eine Liste mit Orten ausgeben. Dafür kennen Sie 2 00:00:07,550 --> 00:00:09,780 eine Komponente aus React Native, die wir importieren 3 00:00:09,780 --> 00:00:14,010 können, und das ist die flache Liste. Eine flache Liste ist natürlich perfekt für 4 00:00:14,040 --> 00:00:15,620 die Ausgabe einer Liste. 5 00:00:15,780 --> 00:00:18,570 Also werde ich hier jetzt eine flache 6 00:00:18,900 --> 00:00:21,890 Liste zurückgeben und möchte Zugang zu meinen Plätzen bekommen. 7 00:00:21,930 --> 00:00:23,970 Diese werden in Redux gespeichert, 8 00:00:23,970 --> 00:00:30,960 damit wir oder mit Hilfe von Redux React Redux hier importieren können, oder genauer gesagt, aus diesem Paket importieren wir 9 00:00:30,960 --> 00:00:37,740 den Verwendungsselektor, da wir ihn jetzt in unserer Komponente verwenden können, um Zugriff auf Daten zu erhalten in Redux gespeichert. 10 00:00:37,740 --> 00:00:41,630 Hier möchte ich mit Hilfe des Verwendungswählers Zugriff auf meine 11 00:00:41,640 --> 00:00:47,190 Plätze erhalten. Das ist ein Kinderspiel. Wir übergeben die Funktion, die unseren Redux-Speicher empfängt, unseren 12 00:00:47,190 --> 00:00:53,490 Redux-Status, der dort im Geschäft gespeichert ist, und dort möchte ich Zugriff erhalten zu den Orten Slice 13 00:00:53,490 --> 00:00:59,880 und hier benutze ich Orte weil in App. js, ich habe hier Orte als Bezeichner verwendet, der uns zu dem Slice führt, das mit 14 00:01:00,240 --> 00:01:02,880 dem Ortsreduzierer verwaltet wird, und in diesem Reduzierer haben wir einen anderen Ortsschlüssel, 15 00:01:03,000 --> 00:01:09,870 also möchte ich hier am Ende auf den Status zugreifen. setzt. Orte und damit wissen wir, welche Art 16 00:01:09,870 --> 00:01:12,660 von Daten wir in die flache Liste einspeisen möchten. 17 00:01:12,660 --> 00:01:19,800 Jetzt werde ich hier wieder einen Schlüsselextraktor hinzufügen, um der flachen Liste mitzuteilen, wo für jedes Element eine eindeutige ID zu finden 18 00:01:19,800 --> 00:01:23,480 ist. Für mich befindet sich diese in der ID-Eigenschaft jedes Ortes, 19 00:01:23,490 --> 00:01:29,820 und natürlich müssen wir ein Renderelement hinzufügen, damit wir sie erhalten unsere Artikeldaten Daten und geben dann eine Komponente 20 00:01:29,820 --> 00:01:32,920 für jeden Artikel aus, den wir ausgeben möchten. 21 00:01:33,060 --> 00:01:38,730 Jetzt erstelle ich eine brandneue Komponente im Komponentenordner und das 22 00:01:38,790 --> 00:01:47,910 ist das PlaceItem. js Datei. Um Zeit zu sparen, habe ich mein PlaceItem angehängt. js Datei zu dieser Vorlesung und Sie können 23 00:01:48,180 --> 00:01:53,040 einfach Ihre oder deren Inhalt durch meine ersetzen, aber ich werde Sie natürlich durch das führen, was ich 24 00:01:53,040 --> 00:01:53,790 dort mache. 25 00:01:53,910 --> 00:01:59,520 Dies ist eine grundlegende Komponente, da wir sie in diesem Kurs auch mehrmals erstellt haben. Ich habe 26 00:01:59,520 --> 00:02:05,460 hier nur meine eigene Komponente, die ein Bild ausgeben kann, da wir diese später benötigen. Diese hat dann eine 27 00:02:05,520 --> 00:02:09,240 Ansicht mit zwei Textstücken, die dies tun Sitzen Sie neben diesem Bild, 28 00:02:09,270 --> 00:02:15,930 dank des Stils, das ich dort unten angewendet habe. Dort gebe ich den Titel und die Adresse dieses 29 00:02:15,930 --> 00:02:21,900 Ortes aus, natürlich sind dies Informationen, die wir noch nicht haben, aber wir werden diese in diesem Modul hinzufügen 30 00:02:21,900 --> 00:02:27,720 und wir haben eine berührbare Deckkraftkomponente, damit wir jeden Ort und wann drücken können Wenn wir darauf drücken, 31 00:02:27,720 --> 00:02:31,400 lösen wir eine Funktion aus, die wir für die On-Select-Requisite erwarten. 32 00:02:31,440 --> 00:02:36,990 In meinem Styling hier habe ich dies so eingerichtet, dass das Bild und dieser Textblock hier 33 00:02:36,990 --> 00:02:43,230 in einer Reihe mit Flex-Direction-Reihe nebeneinander liegen. Das Bild ist dann das abgerundete Bild, also ein abgerundetes Bild, 34 00:02:43,230 --> 00:02:49,860 ein Kreis mit eine volle Hintergrundfarbe für den Fall, dass wir noch kein Bild haben, das Sie natürlich auch 35 00:02:49,860 --> 00:02:56,310 ändern können, zum Beispiel in diese graue Farbe. Dann haben wir den Info-Container, der die 36 00:02:56,310 --> 00:03:01,590 beiden Textteile enthält, die jetzt in einer Spalte übereinander angeordnet sind, und dann 37 00:03:02,010 --> 00:03:07,290 haben wir den Titel, der etwas größer als die Adresse ist, und dort 38 00:03:07,290 --> 00:03:14,210 möchte ich eigentlich auch verwenden Schwarz als Textfarbe. Das ist das Setup, das ich hier 39 00:03:14,210 --> 00:03:17,330 verwenden werde, und das ist das 40 00:03:17,330 --> 00:03:27,850 Ortselement, das wir jetzt in den Ortslistenbildschirm importieren können, sodass wir dort Ortselemente aus Komponenten-Platzierungselementen importieren und hier in Renderelementen ausgeben können. 41 00:03:27,850 --> 00:03:34,780 Dort möchte ich das Platzierungselement als selbstschließende Komponente ausgeben und jetzt das Platzierungselement. Diese 42 00:03:34,780 --> 00:03:40,630 neue Komponente benötigt einige Eingabedaten. Wir müssen eine On-Select-Requisite übergeben, die auf eine Funktion 43 00:03:40,630 --> 00:03:47,560 zeigt, die ausgeführt werden soll, wenn wir auf ein Symbol tippen. Wir müssen eine Bild-Requisite, eine Titel-Requisite und eine Adress-Requisite übergeben, also 44 00:03:47,560 --> 00:03:53,730 vier Requisiten, die bereitgestellt werden müssen. Also machen wir das hier. Für das Bild haben wir noch kein 45 00:03:53,740 --> 00:03:59,500 Bild, daher werde ich hier für den Moment nur null übergeben. Für den Titel können wir das natürlich tun, 46 00:03:59,590 --> 00:04:06,010 wir können auf itemData zeigen. Artikel. Titel, da ein einzelnes Element nur ein Element ist, 47 00:04:06,010 --> 00:04:13,100 das unserem Ortsmodell folgt, und das natürlich eine Titelstütze hat, sodass wir sicher darauf zugreifen können. Für die Adresse haben wir das noch nicht, also 48 00:04:13,100 --> 00:04:14,470 setze ich 49 00:04:14,780 --> 00:04:16,260 dies auf null und 50 00:04:16,280 --> 00:04:18,440 für select können wir das 51 00:04:18,440 --> 00:04:19,940 natürlich setzen, da möchte 52 00:04:19,970 --> 00:04:25,070 ich doch auf eine neue Seite gehen. Wir können dies also mit einer anonymen Inline-Funktion hier oder mit einer benannten 53 00:04:25,070 --> 00:04:26,750 Funktion tun, die in einer separaten Konstante gespeichert 54 00:04:27,200 --> 00:04:28,300 ist. Was auch immer Sie 55 00:04:28,610 --> 00:04:35,440 wollen, ich mache es inline und dort kann ich Requisiten verwenden. Navigation. Navigieren Sie und gehen Sie zum Ortsdetailbildschirm 56 00:04:35,450 --> 00:04:40,580 mit der Ortsdetailkennung, die in meinem Navigator natürlich hier und da diese Kennung ist. Ich möchte auch 57 00:04:43,380 --> 00:04:43,950 einige 58 00:04:43,980 --> 00:04:50,610 zusätzliche Daten, einige Parameter, übergeben, daher übergebe ich hier und dort ein zweites Argument, um zu navigieren sind zwei Informationen, die 59 00:04:50,610 --> 00:04:52,860 ich weitergeben möchte, das ist der Ortstitel 60 00:04:52,860 --> 00:04:57,680 und das ist natürlich itemData. Artikel. Titel, also genau das 61 00:04:57,750 --> 00:05:01,770 gleiche, was ich hier in die Titelrequisite einspeise, und das ist auch 62 00:05:01,770 --> 00:05:06,650 die Orts-ID, die itemData ist. Artikel. id und wir haben 63 00:05:06,720 --> 00:05:08,890 diese ID auch schon, also generieren 64 00:05:08,910 --> 00:05:14,640 wir sie bereits, wenn wir einen neuen Ort hinzufügen. Damit haben wir ein Ortselement, das uns zum 65 00:05:14,640 --> 00:05:19,800 Ortsdetailbildschirm führt, und da wir bereits ein grundlegendes Skelett in diesem Bildschirm haben, sollten 66 00:05:19,950 --> 00:05:21,890 wir das sehen können. 67 00:05:21,960 --> 00:05:28,170 Eine Sache, die ich dem Ortsdetailbildschirm hinzufügen werde, ist jedoch die Konfiguration meiner Navigationsoptionen, bei der 68 00:05:28,170 --> 00:05:34,950 ich diese dynamische Funktion benötige, die dann ein Konfigurationsobjekt zurückgibt, da ich dort den Headertitel basierend auf 69 00:05:34,950 --> 00:05:41,040 den Parametern festlegen möchte, die ich in der Ortsliste erhalte Bildschirm, ich übergebe einen Orts-Titel 70 00:05:41,040 --> 00:05:47,070 und einen Orts-ID-Parameter an diesen neuen Bildschirm. Der Ortstitel ist das, was ich hier in meinem Header extrahieren und 71 00:05:47,070 --> 00:05:47,890 festlegen möchte, damit 72 00:05:47,940 --> 00:05:56,040 ich dort den Titel des Headers auf navData setzen kann. Navigation. getParam platziert den Titel so, 73 00:05:56,070 --> 00:06:02,910 dass wir diesen Titel in der Kopfzeile haben. Und jetzt versuchen wir es, speichern wir 74 00:06:02,910 --> 00:06:11,230 alles und fügen einen neuen Ort hinzu, einen Test. Klicken Sie auf "Ort speichern". Wir werden zurückgenommen und sehen, dass wir hier, wenn ich 75 00:06:11,230 --> 00:06:18,100 darauf tippe, zum Detailbildschirm gehen, wo wir das in der Kopfzeile sehen. Probieren wir es auch mit einem Test auf Android 76 00:06:18,700 --> 00:06:26,070 aus, speichern Sie diesen, klicken Sie darauf und alles funktioniert. Das ist also der grundlegende Ablauf dafür, aber eine Sache, 77 00:06:26,070 --> 00:06:30,300 die wir natürlich noch nicht getan haben, ist die Verwendung einiger nativer Funktionen. 78 00:06:30,570 --> 00:06:34,710 Jetzt ist es wirklich an der Zeit, dass wir das tun und ich möchte mit der Kamera beginnen.