Stellen wir also sicher, dass wir alle Daten sehen können, mit denen wir arbeiten. In dem Platzartikel habe ich bereits ein
Gefühl für die Adresse bekommen, ich
muss nur sicherstellen, dass ich das dort hineinpasse. Wenn ich also im Ortslistenbildschirm das Ortselement verwende, anstatt null für die
Adresse zu übergeben, sollten wir natürlich itemData übergeben. Artikel. Adresse dort, weil
wir die Adresse gespeichert haben sollten.
Wenn wir das versuchen und dies neu laden, sehen wir hier und jetzt eine Dummy-Adresse, wenn wir ein neues Element hinzufügen, das als Titel und dann
als Bild dienen soll, um ein schönes Bild aufzunehmen, und wir können uns hier sogar ein wenig bewegen,
indem wir auf drücken Schlüssel, den
Sie dort unten sehen. Wenn
ich
jetzt hier ein Bild mache, sieht das gut aus, und bestätigen Sie, indem Sie dort oben auf Zuschneiden klicken, das
sieht gut aus.
Holen Sie sich jetzt vielleicht den Benutzerstandort und speichern Sie diesen, das sieht gut aus.
Dies ist die Adresse des Google-Hauptsitzes. Dies sieht aus
wie das Bild, das ich aufgenommen
habe. Das ist also schön.
Stellen wir sicher, dass wir auf der Detailseite auch ein bisschen mehr darüber sehen und dass wir
dies auf dem Ortsdetailbildschirm hier natürlich optimieren und eine Bildlaufansicht hinzufügen können, damit wir immer alles sehen können, wir Ich brauche hier
keine flache Liste, weil wir nicht unendlich viele Elemente haben, vielleicht nur ein bisschen Scrollen, das basierend
auf der Gerätegröße erforderlich ist, und dann möchte ich
auf jeden Fall in der Lage sein, ein Bild auszugeben .
Hier gebe ich mein Bild aus und darunter
möchte ich auch meine Adresse und dann auch eine Kartenvorschau ausgeben können, also importiere ich dies
ebenfalls und wir müssen diese Komponente ein wenig optimieren
Bit also, aber im Moment importiere ich einfach die Kartenvorschau aus der Komponenten-Kartenvorschau wie diese und gebe diese
hier unter meinem Text aus.
Jetzt im Text möchte ich meinen Adresstext am Ende haben und das sind natürlich alle Daten, von denen ich erwarte, dass sie als
Parameter oder mit Hilfe von Parametern übergeben werden. Um genau
zu sein, wenn wir ein Element auswählen, übergeben wir es bereits die Orts-ID hier.
Auf dem Ortsdetailbildschirm kann ich die Orts-ID durch Zugriff auf Requisiten abrufen. Navigation. getParam place ID ist die
Kennung, die ich verwendet habe, und dann können wir natürlich den Use Selector verwenden,
um
die Anpassungsdaten aus unserem Redux-Store abzurufen.
Aus React Redux importieren wir diese Daten von dort und können dann hier unseren ausgewählten Ort mit dem abrufen Hilfe der
Verwendung Selektor, Übergabe einer Funktion und Zugriffsstatus. setzt. Orte und dann die Suchmethode, um einen bestimmten Ort zu
finden, an dem die Orts-ID gleich der Orts-ID sein sollte, die wir aus unseren Parametern extrahieren. Dies ist
der Ort, den wir für diesen Bildschirm geladen haben, und der ausgewählte Ort hat daher natürlich ein Adressfeld, das Wir können darauf zugreifen,
da dies am Ende unserem Ortsmodell folgt. Für das Bild können wir dann natürlich auch die Quelle binden und den
URI für dieses Objekt festlegen, an das wir die Quelle an selectedPlace übergeben. imageUri, weil ich in meinem Ortsmodell dort
diesen Bild-URI benenne, das extrahiere
ich
hier und für
die Kartenvorschau möchte ich meinen Standort übergeben.
Gut ist, dass meine Kartenvorschau natürlich einen Standort enthält. Sie
sucht nach diesem Standort-Requisit, damit ich diesen weitergeben kann. Dies sollte ein Objekt mit Lat-Schlüssel sein,
damit wir selectedPlace verwenden können. lat dafür und die lng-Taste, die ausgewählt ist. lng.
Jetzt geben wir das alles dort weiter.
Jetzt werde ich auch den Text hier in eine Ansicht einbinden und dann hier einige Stile zuweisen.
Auf dem Bild hier möchte ich einen Stil von Stilen haben. Bild in dieser Ansicht hier, die mein gesamtes standortbasiertes Material
einschließt. Ich möchte
einen Stil von beispielsweise Standortcontainer haben. In dieser Ansicht hier,
einem
Adresscontainerstil, im Text hier, im Adressstil und in der Kartenvorschau werde ich auch einen Stil festlegen
und diese
Kartenvorschau wie folgt benennen.
Wenn Sie nun genau dieselben Namen verwenden, finden Sie im Anhang ein Styling, das ich für Sie eingerichtet habe. Sie können
einfach Ihr Styles-Objekt durch dieses ersetzen. Dadurch werden Styles
für all diese Bezeichner eingerichtet, die ich gerade hinzugefügt habe, damit alles so aussieht, wie ich es bin will es
aussehen.
Das ist also beigefügt und Sie können das verwenden, um sicherzustellen, dass Sie das gleiche Styling sofort erhalten,
ohne dass ich all diese Stile schreibe, da wir in diesem Kurs so viele Stile geschrieben
haben. Hier möchte ich mich wirklich auf die native Funktionalität konzentrieren und nicht schreibe die alle noch einmal.
Nun ist es wichtig, dass Sie in der Bildlaufansicht auch den Stil des
Inhaltscontainers festlegen. Dort verwende ich ein schnelles und schmutziges Inline-Styling, um die Elemente hier so
auszurichten, dass alles gut auf der horizontalen Achse zentriert ist. Damit sollten wir in der Lage sein, die Details eines Ortes anzuzeigen.
Ein wichtiger Hinweis: Ich verwende die Farbkonstante in den Stilen, die
ich Ihnen bereitgestellt habe. Sie müssen also sicherstellen, dass Sie diese importieren, Farben aus Konstanten / Farben importieren und diesen Import auch hier hinzufügen, wenn Sie
diese speichern und neu laden. Sie sollten in der Lage sein, diese Orte auf Android zu sehen, und natürlich
können Sie einen Fallback-Text anzeigen, wenn Sie keine Orte haben,
aber jetzt sehen Sie hier die Orte,
und wenn ich darauf klicke, ist dies der Detailbildschirm.
Das einzige Problem, das ich damit habe, ist, dass es
gut aussieht,
das ist gut, aber wenn ich auf die Karte klicke, passiert nichts und natürlich möchte ich dort auch zum
Kartenbildschirm gehen, aber auf nicht bearbeitbare Weise, so dass ich Gehen Sie zum Kartenbildschirm, ohne ihn dort bearbeiten zu können.
Das ist das verbleibende Stück, das wir
hinzufügen müssen.