Ich möchte also eine Schaltfläche zum Speichern in meiner Kopfzeile haben. Dazu müssen wir natürlich Navigationsoptionen für den Kartenbildschirm hinzufügen
und das Funktionsformular dort verwenden, damit wir auf dieses Navigationsgerät, dieses Objekt mit dem
Navigationsobjekt und dort zugreifen können Ich möchte mein Konfigurationsobjekt zurückgeben.
Sie könnten einen Header-Titel hinzufügen, aber ich bin eigentlich glücklich
ohne einen, aber ich möchte den Header genau hier und jetzt festlegen. Hier können Sie
natürlich die Header-Schaltflächen verwenden und ein schönes Symbol rendern, aber eigentlich werde ich hier Text rendern. Also importiere ich die Textkomponente oder stelle sicher,
dass Sie sie importiert haben. Ich werde hier einen Text rendern,
in dem ich nur Speichern sage, und Sie können natürlich auch eine Plattformprüfung
hinzufügen, um
diesen Großbuchstaben auf Android zu erstellen, wenn Sie möchten. Ich sage einfach Speichern wie folgt und füge dann hier einen Stil hinzu Ich
füge meinen Textstil für die Kopfzeile hinzu und möchte eine berührbare Ansicht haben. Daher verwende ich
hier die berührbare Deckkraft, die Sie daher auch importieren müssen, nicht von dort, sondern tatsächlich von
React Native. Daher sollte die berührbare Deckkraft importiert werden von React Native und mit diesem Import können wir dies um
diesen Text wickeln, um sozusagen unsere eigenen Schaltflächen zu erstellen, und dort möchte ich auch einen Stil hinzufügen, und
dieser Stil wird eine Kennung der Kopfzeilenschaltfläche haben, sagen wir. Wenn ich dies drücke, möchte ich speichern, was wir hinzugefügt haben, oder unseren ausgewählten Standort speichern,
aber das werde ich gleich tun. Lassen Sie uns dies jetzt stylen. Da unten im Stylesheet füge ich für die Kopfzeilenschaltfläche, die
diese berührbare Deckkraft aufweist, einen horizontalen Rand von 20 hinzu, um einen gewissen Abstand um die Schaltfläche links und rechts zu haben, und
im Text der Kopfzeilenschaltfläche hier ist es natürlich oben Ihnen, was Sie dort hinzufügen möchten, aber
ich werde eine Schriftgröße von 16 hinzufügen, sagen wir und wichtig, die Farbe. Dafür benötige ich die Plattform-API, da sich die Farbe unterscheiden muss.
Da sich diese in der Kopfzeile befindet, die unter Android einen soliden Hintergrund hat, aber nicht unter
iOS, kann ich hier meine Farbe und meine Textfarbe auf Plattform einstellen. Das Betriebssystem entspricht Android. Um dies zu überprüfen, setze ich es
auf Android auf Weiß und ansonsten auf Farben. primär und dafür wie immer
sicherstellen, dass Sie Ihre Farben von dort oben konstant importieren.
Jetzt haben wir die Schaltfläche Speichern. Wenn wir die Schaltfläche Speichern drücken, möchte ich eine Funktion auslösen, die in
der Komponente definiert werden soll. Dies haben wir auch mehrmals im Kurs getan. Ich habe Ihnen gezeigt, wie
Sie zwischen Ihrer Komponente kommunizieren können und auch Ihre Navigationsoptionen hier. Wir können hier also im Wesentlichen eine
neue Funktion hinzufügen, den ausgewählten Standort-Handler speichern, wie auch immer Sie ihn benennen möchten, und diese Funktion oder ein Verweis auf diese Funktion
sollte an die Navigationsoptionen übergeben werden, und dafür können wir den
guten alten Effekt-Hook verwenden und verwenden Sie den Rückruf, um diese Endlosschleife zu vermeiden, wenn Sie
sich erinnern, und wir können dies daher mit Rückruf verwenden und dann den Effekt hier verwenden, um unsere Navigationsoptionen darüber mit Hilfe
der Requisiten-Navigationssatzparameter zu informieren, und dann möchte ich hier meinen Speicherortparameter festlegen Übergeben Sie also einen Verweis auf diese Funktion, auf diesen Parameter oder mit diesem
Parameter auf meine Header, und der Effekt der Verwendung hängt natürlich von der Funktion zum Speichern
des ausgewählten Standortes ab. Daher füge ich ihn hier und als Abhängigkeit hinzu Wichtig ist jetzt, Rückruf
hier zu verwenden hat auch eine Reihe von Abhängigkeiten, weil ich hier im Grunde diese Seite verlassen und zurückgehen möchte,
also kann ich hier die Requisitennavigation verwenden, zurückgehen und wir werden
dies in einer Sekunde optimieren, aber für den Moment, wir kann dies tun.
Und daher wäre diese Zurück-Funktion normalerweise meine Abhängigkeit, aber um eine Endlosschleife zu vermeiden, müssen wir bei diesem Ansatz,
indem wir Parameter verwenden, um die Komponente zu aktualisieren, auf der wir uns
bereits befinden, hier tatsächlich ein leeres Array hinzufügen als Abhängigkeit, so dass diese Funktion derzeit nicht effektiv
neu erstellt wird.
Damit können wir diesen Speicherortparameter in unserem Header extrahieren.
Hier möchte ich auf meine Speicherfunktion verweisen, die ich mit navData erhalte. Navigation. getParam zeigt auf die Speicherortkennung und dann
auf die Speicherfunktion. Dies ist die Funktion, die ich über die berührbare Deckkraft mit dem
onPress-Handler verbinde.
Dies sollte also diese Speicherfunktion auslösen, diese Funktion zum Speichern ausgewählter Standorthandler hier. Wenn das gespeichert ist, wenn wir zurückgehen, probieren wir es
aus, gehen wir
zur Karte und wenn ich jetzt auf Speichern klicke, sollte es einfach zurückgehen und es tut es.
Das funktioniert also, aber im Moment speichere ich natürlich keinen Ort, ich verwende keinen Ort, das
ist der nächste Schritt und
dafür müssen wir den ausgewählten Standortbenutzer zum vorherigen Bildschirm zurückführen. Mit "Zurück" ist das relativ schwierig, aber stattdessen
können wir ein Muster verwenden, das ich zuvor in diesem Kurs nicht wirklich
verwendet habe. Ich kann auch hier navigieren, um dann zurückzukehren. Ich kann mit der neuen Ortskennung, die hier in meinem Ortsnavigator
eingerichtet ist, zu meinem neuen Ortsbildschirm navigieren. Da ich mich bereits auf einem Bildschirm vor diesem neuen Ortsbildschirm befinde, vergessen Sie nicht, dass dies
ein Stapel von
Bildschirmen ist und ich bin auf einem Bildschirm über dem neuen Ortsbildschirm, dies wird diesen neuen
Ortsbildschirm tatsächlich nicht über den vorhandenen Bildschirm schieben, wir könnten dies mit Push erzwingen,
aber ich möchte nicht, stattdessen wird es
aber jetzt zurückgehen Mit der Navigation kann ich hier einige Parameter anhängen. Ich kann meinen ausgewählten Standort hinzufügen und dort
auf meinen ausgewählten Standort zeigen, der hoffentlich meinen ausgewählten Standort enthält. Da ich hier den ausgewählten Ort verwende und dies sich ändert, füge ich
dies als Abhängigkeit für die Verwendung des Rückrufs hinzu, damit diese Funktion neu erstellt wird, wenn
wir einen neuen Ort ausgewählt haben und ich sicherstellen möchte, dass wir hier einen Ort haben
Ich werde also prüfen, ob der ausgewählte Ort ausgewählt wurde oder um genau zu sein, ob wir keinen haben. Wenn dies
also undefiniert ist,
was bedeutet, dass der Benutzer noch keinen ausgewählt hat, werde ich zurückkehren und nicht fortfahren, und
wir können auch anzeigen eine Warnung hier, wenn wir wollen. Jetzt werde ich das hier nicht tun, aber Sie könnten eine
Warnung anzeigen, wenn Sie wollten.
Jetzt können wir nur dann auf Speichern klicken, wenn wir einen Ort ausgewählt haben. Wenn wir
dies tun, setzen wir ihn tatsächlich auf die
Parameter unserer Zurück-Aktion. Probieren wir es
aus, gehen wir dorthin, klicken Sie auf picK auf der Karte und beachten Sie, dass ich noch keinen Ort ausgewählt habe.
Ich habe noch nirgendwo geklickt.
Wenn ich also auf Speichern klicke, passiert nichts. Wenn ich einen Ort auswähle und auf Speichern klicke, gehe ich jedoch zurück.
Jetzt können wir die Daten, die wir vom Kartenbildschirm zurückgeben, in unserer Standortauswahl verwenden, um die Kartenvorschau dort zu aktualisieren. Das ist
also das nächste,
was ich tun werde.