1 00:00:02,230 --> 00:00:12,550 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 2 00:00:12,550 --> 00:00:19,620 und das Funktionsformular dort verwenden, damit wir auf dieses Navigationsgerät, dieses Objekt mit dem 3 00:00:20,070 --> 00:00:25,500 Navigationsobjekt und dort zugreifen können Ich möchte mein Konfigurationsobjekt zurückgeben. 4 00:00:25,500 --> 00:00:28,070 Sie könnten einen Header-Titel hinzufügen, aber ich bin eigentlich glücklich 5 00:00:28,200 --> 00:00:32,040 ohne einen, aber ich möchte den Header genau hier und jetzt festlegen. Hier können Sie 6 00:00:32,190 --> 00:00:39,960 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, 7 00:00:40,350 --> 00:00:46,080 dass Sie sie importiert haben. Ich werde hier einen Text rendern, 8 00:00:46,330 --> 00:00:51,720 in dem ich nur Speichern sage, und Sie können natürlich auch eine Plattformprüfung 9 00:00:51,720 --> 00:00:53,050 hinzufügen, um 10 00:00:53,130 --> 00:01:02,510 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 11 00:01:02,510 --> 00:01:09,050 füge meinen Textstil für die Kopfzeile hinzu und möchte eine berührbare Ansicht haben. Daher verwende ich 12 00:01:09,050 --> 00:01:15,770 hier die berührbare Deckkraft, die Sie daher auch importieren müssen, nicht von dort, sondern tatsächlich von 13 00:01:15,770 --> 00:01:24,050 React Native. Daher sollte die berührbare Deckkraft importiert werden von React Native und mit diesem Import können wir dies um 14 00:01:24,050 --> 00:01:31,770 diesen Text wickeln, um sozusagen unsere eigenen Schaltflächen zu erstellen, und dort möchte ich auch einen Stil hinzufügen, und 15 00:01:31,770 --> 00:01:40,270 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, 16 00:01:40,270 --> 00:01:46,780 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 17 00:01:46,780 --> 00:01:53,440 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 18 00:01:53,440 --> 00:01:58,060 im Text der Kopfzeilenschaltfläche hier ist es natürlich oben Ihnen, was Sie dort hinzufügen möchten, aber 19 00:01:58,060 --> 00:02:05,920 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. 20 00:02:05,920 --> 00:02:11,440 Da sich diese in der Kopfzeile befindet, die unter Android einen soliden Hintergrund hat, aber nicht unter 21 00:02:11,500 --> 00:02:19,960 iOS, kann ich hier meine Farbe und meine Textfarbe auf Plattform einstellen. Das Betriebssystem entspricht Android. Um dies zu überprüfen, setze ich es 22 00:02:19,960 --> 00:02:26,550 auf Android auf Weiß und ansonsten auf Farben. primär und dafür wie immer 23 00:02:26,620 --> 00:02:32,610 sicherstellen, dass Sie Ihre Farben von dort oben konstant importieren. 24 00:02:32,690 --> 00:02:38,180 Jetzt haben wir die Schaltfläche Speichern. Wenn wir die Schaltfläche Speichern drücken, möchte ich eine Funktion auslösen, die in 25 00:02:38,180 --> 00:02:43,370 der Komponente definiert werden soll. Dies haben wir auch mehrmals im Kurs getan. Ich habe Ihnen gezeigt, wie 26 00:02:43,370 --> 00:02:50,360 Sie zwischen Ihrer Komponente kommunizieren können und auch Ihre Navigationsoptionen hier. Wir können hier also im Wesentlichen eine 27 00:02:50,390 --> 00:03:00,090 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 28 00:03:00,110 --> 00:03:05,100 sollte an die Navigationsoptionen übergeben werden, und dafür können wir den 29 00:03:05,100 --> 00:03:12,150 guten alten Effekt-Hook verwenden und verwenden Sie den Rückruf, um diese Endlosschleife zu vermeiden, wenn Sie 30 00:03:12,150 --> 00:03:21,520 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 31 00:03:21,520 --> 00:03:32,600 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 32 00:03:32,610 --> 00:03:39,390 Parameter auf meine Header, und der Effekt der Verwendung hängt natürlich von der Funktion zum Speichern 33 00:03:39,390 --> 00:03:46,590 des ausgewählten Standortes ab. Daher füge ich ihn hier und als Abhängigkeit hinzu Wichtig ist jetzt, Rückruf 34 00:03:46,590 --> 00:03:55,040 hier zu verwenden hat auch eine Reihe von Abhängigkeiten, weil ich hier im Grunde diese Seite verlassen und zurückgehen möchte, 35 00:03:55,160 --> 00:04:00,130 also kann ich hier die Requisitennavigation verwenden, zurückgehen und wir werden 36 00:04:00,230 --> 00:04:05,630 dies in einer Sekunde optimieren, aber für den Moment, wir kann dies tun. 37 00:04:06,940 --> 00:04:13,420 Und daher wäre diese Zurück-Funktion normalerweise meine Abhängigkeit, aber um eine Endlosschleife zu vermeiden, müssen wir bei diesem Ansatz, 38 00:04:13,450 --> 00:04:18,180 indem wir Parameter verwenden, um die Komponente zu aktualisieren, auf der wir uns 39 00:04:18,370 --> 00:04:24,280 bereits befinden, hier tatsächlich ein leeres Array hinzufügen als Abhängigkeit, so dass diese Funktion derzeit nicht effektiv 40 00:04:24,310 --> 00:04:25,420 neu erstellt wird. 41 00:04:25,480 --> 00:04:30,790 Damit können wir diesen Speicherortparameter in unserem Header extrahieren. 42 00:04:30,790 --> 00:04:41,190 Hier möchte ich auf meine Speicherfunktion verweisen, die ich mit navData erhalte. Navigation. getParam zeigt auf die Speicherortkennung und dann 43 00:04:41,190 --> 00:04:48,480 auf die Speicherfunktion. Dies ist die Funktion, die ich über die berührbare Deckkraft mit dem 44 00:04:48,480 --> 00:04:50,050 onPress-Handler verbinde. 45 00:04:50,070 --> 00:04:59,030 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 46 00:04:59,060 --> 00:05:00,710 aus, gehen wir 47 00:05:00,740 --> 00:05:08,210 zur Karte und wenn ich jetzt auf Speichern klicke, sollte es einfach zurückgehen und es tut es. 48 00:05:08,240 --> 00:05:13,280 Das funktioniert also, aber im Moment speichere ich natürlich keinen Ort, ich verwende keinen Ort, das 49 00:05:13,280 --> 00:05:15,080 ist der nächste Schritt und 50 00:05:15,080 --> 00:05:21,110 dafür müssen wir den ausgewählten Standortbenutzer zum vorherigen Bildschirm zurückführen. Mit "Zurück" ist das relativ schwierig, aber stattdessen 51 00:05:21,110 --> 00:05:25,970 können wir ein Muster verwenden, das ich zuvor in diesem Kurs nicht wirklich 52 00:05:26,540 --> 00:05:34,010 verwendet habe. Ich kann auch hier navigieren, um dann zurückzukehren. Ich kann mit der neuen Ortskennung, die hier in meinem Ortsnavigator 53 00:05:34,070 --> 00:05:41,810 eingerichtet ist, zu meinem neuen Ortsbildschirm navigieren. Da ich mich bereits auf einem Bildschirm vor diesem neuen Ortsbildschirm befinde, vergessen Sie nicht, dass dies 54 00:05:41,810 --> 00:05:42,990 ein Stapel von 55 00:05:43,070 --> 00:05:48,260 Bildschirmen ist und ich bin auf einem Bildschirm über dem neuen Ortsbildschirm, dies wird diesen neuen 56 00:05:48,290 --> 00:05:53,040 Ortsbildschirm tatsächlich nicht über den vorhandenen Bildschirm schieben, wir könnten dies mit Push erzwingen, 57 00:05:53,270 --> 00:05:56,020 aber ich möchte nicht, stattdessen wird es 58 00:05:56,030 --> 00:06:03,890 aber jetzt zurückgehen Mit der Navigation kann ich hier einige Parameter anhängen. Ich kann meinen ausgewählten Standort hinzufügen und dort 59 00:06:04,040 --> 00:06:12,980 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 60 00:06:12,980 --> 00:06:18,320 dies als Abhängigkeit für die Verwendung des Rückrufs hinzu, damit diese Funktion neu erstellt wird, wenn 61 00:06:18,650 --> 00:06:23,900 wir einen neuen Ort ausgewählt haben und ich sicherstellen möchte, dass wir hier einen Ort haben 62 00:06:23,900 --> 00:06:30,800 Ich werde also prüfen, ob der ausgewählte Ort ausgewählt wurde oder um genau zu sein, ob wir keinen haben. Wenn dies 63 00:06:30,830 --> 00:06:32,300 also undefiniert ist, 64 00:06:32,330 --> 00:06:37,580 was bedeutet, dass der Benutzer noch keinen ausgewählt hat, werde ich zurückkehren und nicht fortfahren, und 65 00:06:37,820 --> 00:06:44,750 wir können auch anzeigen eine Warnung hier, wenn wir wollen. Jetzt werde ich das hier nicht tun, aber Sie könnten eine 66 00:06:44,780 --> 00:06:46,780 Warnung anzeigen, wenn Sie wollten. 67 00:06:46,950 --> 00:06:52,110 Jetzt können wir nur dann auf Speichern klicken, wenn wir einen Ort ausgewählt haben. Wenn wir 68 00:06:52,110 --> 00:06:54,740 dies tun, setzen wir ihn tatsächlich auf die 69 00:06:54,750 --> 00:06:57,250 Parameter unserer Zurück-Aktion. Probieren wir es 70 00:06:57,250 --> 00:07:03,250 aus, gehen wir dorthin, klicken Sie auf picK auf der Karte und beachten Sie, dass ich noch keinen Ort ausgewählt habe. 71 00:07:03,280 --> 00:07:04,630 Ich habe noch nirgendwo geklickt. 72 00:07:04,630 --> 00:07:09,160 Wenn ich also auf Speichern klicke, passiert nichts. Wenn ich einen Ort auswähle und auf Speichern klicke, gehe ich jedoch zurück. 73 00:07:09,970 --> 00:07:17,560 Jetzt können wir die Daten, die wir vom Kartenbildschirm zurückgeben, in unserer Standortauswahl verwenden, um die Kartenvorschau dort zu aktualisieren. Das ist 74 00:07:17,590 --> 00:07:18,890 also das nächste, 75 00:07:18,910 --> 00:07:20,290 was ich tun werde.