Daher möchte ich auf dem Bildschirm mit der Ortsliste nicht überraschend eine Liste mit Orten ausgeben. Dafür kennen Sie
eine Komponente aus React Native, die wir importieren
können, und das ist die flache Liste. Eine flache Liste ist natürlich perfekt für
die Ausgabe einer Liste.
Also werde ich hier jetzt eine flache
Liste zurückgeben und möchte Zugang zu meinen Plätzen bekommen.
Diese werden in Redux gespeichert,
damit wir oder mit Hilfe von Redux React Redux hier importieren können, oder genauer gesagt, aus diesem Paket importieren wir
den Verwendungsselektor, da wir ihn jetzt in unserer Komponente verwenden können, um Zugriff auf Daten zu erhalten in Redux gespeichert.
Hier möchte ich mit Hilfe des Verwendungswählers Zugriff auf meine
Plätze erhalten. Das ist ein Kinderspiel. Wir übergeben die Funktion, die unseren Redux-Speicher empfängt, unseren
Redux-Status, der dort im Geschäft gespeichert ist, und dort möchte ich Zugriff erhalten zu den Orten Slice
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
dem Ortsreduzierer verwaltet wird, und in diesem Reduzierer haben wir einen anderen Ortsschlüssel,
also möchte ich hier am Ende auf den Status zugreifen. setzt. Orte und damit wissen wir, welche Art
von Daten wir in die flache Liste einspeisen möchten.
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
ist. Für mich befindet sich diese in der ID-Eigenschaft jedes Ortes,
und natürlich müssen wir ein Renderelement hinzufügen, damit wir sie erhalten unsere Artikeldaten Daten und geben dann eine Komponente
für jeden Artikel aus, den wir ausgeben möchten.
Jetzt erstelle ich eine brandneue Komponente im Komponentenordner und das
ist das PlaceItem. js Datei. Um Zeit zu sparen, habe ich mein PlaceItem angehängt. js Datei zu dieser Vorlesung und Sie können
einfach Ihre oder deren Inhalt durch meine ersetzen, aber ich werde Sie natürlich durch das führen, was ich
dort mache.
Dies ist eine grundlegende Komponente, da wir sie in diesem Kurs auch mehrmals erstellt haben. Ich habe
hier nur meine eigene Komponente, die ein Bild ausgeben kann, da wir diese später benötigen. Diese hat dann eine
Ansicht mit zwei Textstücken, die dies tun Sitzen Sie neben diesem Bild,
dank des Stils, das ich dort unten angewendet habe. Dort gebe ich den Titel und die Adresse dieses
Ortes aus, natürlich sind dies Informationen, die wir noch nicht haben, aber wir werden diese in diesem Modul hinzufügen
und wir haben eine berührbare Deckkraftkomponente, damit wir jeden Ort und wann drücken können Wenn wir darauf drücken,
lösen wir eine Funktion aus, die wir für die On-Select-Requisite erwarten.
In meinem Styling hier habe ich dies so eingerichtet, dass das Bild und dieser Textblock hier
in einer Reihe mit Flex-Direction-Reihe nebeneinander liegen. Das Bild ist dann das abgerundete Bild, also ein abgerundetes Bild,
ein Kreis mit eine volle Hintergrundfarbe für den Fall, dass wir noch kein Bild haben, das Sie natürlich auch
ändern können, zum Beispiel in diese graue Farbe. Dann haben wir den Info-Container, der die
beiden Textteile enthält, die jetzt in einer Spalte übereinander angeordnet sind, und dann
haben wir den Titel, der etwas größer als die Adresse ist, und dort
möchte ich eigentlich auch verwenden Schwarz als Textfarbe. Das ist das Setup, das ich hier
verwenden werde, und das ist das
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.
Dort möchte ich das Platzierungselement als selbstschließende Komponente ausgeben und jetzt das Platzierungselement. Diese
neue Komponente benötigt einige Eingabedaten. Wir müssen eine On-Select-Requisite übergeben, die auf eine Funktion
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
vier Requisiten, die bereitgestellt werden müssen. Also machen wir das hier. Für das Bild haben wir noch kein
Bild, daher werde ich hier für den Moment nur null übergeben. Für den Titel können wir das natürlich tun,
wir können auf itemData zeigen. Artikel. Titel, da ein einzelnes Element nur ein Element ist,
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
setze ich
dies auf null und
für select können wir das
natürlich setzen, da möchte
ich doch auf eine neue Seite gehen. Wir können dies also mit einer anonymen Inline-Funktion hier oder mit einer benannten
Funktion tun, die in einer separaten Konstante gespeichert
ist. Was auch immer Sie
wollen, ich mache es inline und dort kann ich Requisiten verwenden. Navigation. Navigieren Sie und gehen Sie zum Ortsdetailbildschirm
mit der Ortsdetailkennung, die in meinem Navigator natürlich hier und da diese Kennung ist. Ich möchte auch
einige
zusätzliche Daten, einige Parameter, übergeben, daher übergebe ich hier und dort ein zweites Argument, um zu navigieren sind zwei Informationen, die
ich weitergeben möchte, das ist der Ortstitel
und das ist natürlich itemData. Artikel. Titel, also genau das
gleiche, was ich hier in die Titelrequisite einspeise, und das ist auch
die Orts-ID, die itemData ist. Artikel. id und wir haben
diese ID auch schon, also generieren
wir sie bereits, wenn wir einen neuen Ort hinzufügen. Damit haben wir ein Ortselement, das uns zum
Ortsdetailbildschirm führt, und da wir bereits ein grundlegendes Skelett in diesem Bildschirm haben, sollten
wir das sehen können.
Eine Sache, die ich dem Ortsdetailbildschirm hinzufügen werde, ist jedoch die Konfiguration meiner Navigationsoptionen, bei der
ich diese dynamische Funktion benötige, die dann ein Konfigurationsobjekt zurückgibt, da ich dort den Headertitel basierend auf
den Parametern festlegen möchte, die ich in der Ortsliste erhalte Bildschirm, ich übergebe einen Orts-Titel
und einen Orts-ID-Parameter an diesen neuen Bildschirm. Der Ortstitel ist das, was ich hier in meinem Header extrahieren und
festlegen möchte, damit
ich dort den Titel des Headers auf navData setzen kann. Navigation. getParam platziert den Titel so,
dass wir diesen Titel in der Kopfzeile haben. Und jetzt versuchen wir es, speichern wir
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
darauf tippe, zum Detailbildschirm gehen, wo wir das in der Kopfzeile sehen. Probieren wir es auch mit einem Test auf Android
aus, speichern Sie diesen, klicken Sie darauf und alles funktioniert. Das ist also der grundlegende Ablauf dafür, aber eine Sache,
die wir natürlich noch nicht getan haben, ist die Verwendung einiger nativer Funktionen.
Jetzt ist es wirklich an der Zeit, dass wir das tun und ich möchte mit der Kamera beginnen.