1 00:00:02,250 --> 00:00:07,590 Das Hinzufügen einer Schaltfläche zur Kopfzeile, wie ich sie hier haben möchte, wie z. B. einer 2 00:00:07,590 --> 00:00:11,670 Navigationsschaltfläche, erfordert zunächst ein wenig zusätzliche Arbeit, ist danach jedoch sehr einfach. 3 00:00:11,700 --> 00:00:17,160 Wir müssen zunächst ein zusätzliches Paket installieren, um dies zu vereinfachen, da Sie hier theoretisch 4 00:00:17,160 --> 00:00:18,540 viel Leistung haben. 5 00:00:18,660 --> 00:00:21,690 Sie können solche Schaltflächen mithilfe der Navigationsoptionen hinzufügen. Hier 6 00:00:21,690 --> 00:00:27,450 auf dem MealDetailScreen können Sie neben dem Festlegen eines Headertitels auch headerLeft und headerRight festlegen, um 7 00:00:27,450 --> 00:00:30,330 Schaltflächen links und rechts vom Titel hinzuzufügen. 8 00:00:30,330 --> 00:00:36,330 Normalerweise möchten Sie rechts verwenden, da das linke für die Schaltfläche "Zurück" reserviert ist. Im Allgemeinen 9 00:00:36,330 --> 00:00:39,310 können Sie dort einfach ein jsx-Element zurückgeben, 10 00:00:39,450 --> 00:00:47,220 sodass Sie dies einfach auf "Text" wie "Favorit" setzen können. Dies können Sie hier tun und mich tatsächlich lassen Zeigen Sie 11 00:00:47,220 --> 00:00:51,870 dies und starten Sie den Server neu, bevor wir ein Paket verwenden, 12 00:00:51,870 --> 00:00:58,890 denn während Sie hier nur eine Komponente hinzufügen können, erhalten Sie das richtige Design und die richtige Positionierung für 13 00:00:58,950 --> 00:01:05,430 alle verschiedenen Plattformen, insbesondere wenn Sie hier nicht nur Text verwenden, sondern auch Vielleicht ein Symbol, das 14 00:01:05,430 --> 00:01:11,160 Sie normalerweise dort haben möchten, das sehr umständlich sein kann, und deshalb installieren wir ein 15 00:01:11,160 --> 00:01:14,810 zusätzliches Paket, das dies einfacher macht als es sonst ist. 16 00:01:18,260 --> 00:01:25,510 Lassen Sie mich dies mit npm start neu starten, nicht mit npm install, npm start und wenn es wieder 17 00:01:25,850 --> 00:01:34,320 läuft, lassen Sie uns dies hier auf iOS neu laden und Ihnen zeigen, was wir hier haben, nachdem ich einen Text gerendert habe. 18 00:01:34,520 --> 00:01:35,930 Sie sehen diesen Text 19 00:01:35,960 --> 00:01:37,180 hier, also wird 20 00:01:37,190 --> 00:01:43,010 er gerendert, aber wie gesagt, mit der richtigen Polsterung, der richtigen Ausrichtung, dem richtigen Stil, der richtigen Größe, super 21 00:01:43,010 --> 00:01:47,870 nervig, wenn Sie alles alleine machen, weil Sie es nicht nur tun Dies gilt für ein 22 00:01:47,870 --> 00:01:49,300 Gerät, aber für viele Geräte. 23 00:01:49,370 --> 00:01:54,320 Deshalb installieren wir hier tatsächlich ein spezielles Paket, das uns dabei hilft. 24 00:01:54,320 --> 00:02:01,250 Beenden Sie also vorerst den Prozess, den laufenden Entwicklungsprozess, und verwenden Sie npm 25 00:02:01,250 --> 00:02:10,130 install --save und installieren Sie das Paket react-navigation-header-keys. Dieses Paket hilft Ihnen überraschenderweise beim Einrichten, wenn Sie 26 00:02:10,310 --> 00:02:16,220 sich den Namen ansehen Einige Schaltflächen in Ihrer Kopfzeile, also in 27 00:02:16,280 --> 00:02:24,850 dieser oberen Symbolleiste hier. Dies ist ein Paket, das es dann wirklich einfach macht, solche Schaltflächen hinzuzufügen. Nachdem dies hinzugefügt wurde, starte ich 28 00:02:24,850 --> 00:02:30,490 meinen Entwicklungsserver mit npm start neu und erstelle jetzt selbst eine neue Hilfskomponente im Komponentenordner, 29 00:02:30,490 --> 00:02:37,290 die ich als Helfer bezeichne, eine Header-Schaltfläche, keine Helfer-Header-Schaltfläche. Dort importiere ich React from 30 00:02:37,300 --> 00:02:44,210 React, da dies eine normale React-Komponente ist, die wir dort erstellen, 31 00:02:44,570 --> 00:02:51,980 und importiere etwas aus diesem neuen React-Navigation-Header-Buttons-Paket, das wir gerade installiert haben, 32 00:02:51,980 --> 00:03:02,650 und das, was ich importiere, ist die Header-Button. Außerdem importieren wir etwas aus @ expo / vector-icons, das verfügbar sein sollte, 33 00:03:02,680 --> 00:03:08,830 aber um sicherzugehen, können Sie auf jeden Fall auch npm install --save @ expo / 34 00:03:08,830 --> 00:03:16,270 vector-icons ausführen, um dieses Paket ebenfalls zu installieren, weil Sie ' Ich brauche das und das, was wir aus 35 00:03:19,050 --> 00:03:24,630 diesem Paket importieren müssen, sind Ionics. Natürlich können Sie jedes gewünschte Icon-Set verwenden. 36 00:03:24,630 --> 00:03:30,270 Ich habe die Icons bereits in diesem Kurs behandelt und Sie können jedes gewünschte Icon in Ihrer 37 00:03:30,270 --> 00:03:35,250 Header-Schaltfläche verwenden. Ich werde nur mit Ionicons arbeiten, da ich sie im Rest von verwende 38 00:03:35,460 --> 00:03:40,440 Auch in diesem Kurs können Sie beliebige Symbole verwenden. In der Kopfzeile müssen Sie natürlich 39 00:03:40,440 --> 00:03:45,900 keine Symbole verwenden. Sie können auch anderen Text verwenden. In der Regel verwenden Sie jedoch natürlich Symbole, 40 00:03:45,900 --> 00:03:49,470 genau das verwenden Benutzer werden normalerweise von anderen Apps verwendet. 41 00:03:49,740 --> 00:03:58,040 Außerdem importiere ich auch Farben aus Konstanten / Farben und erstelle jetzt meine Komponente hier. Das ist beispielsweise die benutzerdefinierte Kopfzeilenschaltfläche oder 42 00:03:58,070 --> 00:04:04,850 nur die Kopfzeilenschaltfläche, wie auch immer Sie sie benennen möchten, aber wir importieren sie bereits, also wir Ich 43 00:04:05,030 --> 00:04:09,290 muss hier einen anderen Namen auswählen, um keinen Namenskonflikt zu haben. 44 00:04:09,650 --> 00:04:17,390 Dies wird einige Requisiten erhalten und den Header-Button zurückgeben, den wir von diesem Paket erhalten, das wir installiert haben, aber wir 45 00:04:17,390 --> 00:04:22,280 werden bald eine zusätzliche Konfiguration hinzufügen, weshalb ich es bin Wenn Sie dies 46 00:04:22,280 --> 00:04:27,800 in eine separate Komponente einbinden, damit wir diese Konfiguration nicht für jede Schaltfläche wiederholen müssen, 47 00:04:27,800 --> 00:04:28,990 die wir 48 00:04:29,140 --> 00:04:33,250 irgendwo in der App verwenden, exportiere ich natürlich meine benutzerdefinierte Standard-Header-Schaltfläche. 49 00:04:33,340 --> 00:04:39,850 Nun benutze ich diese Header-Schaltfläche, die ich hier aus diesem von uns installierten Paket verwende. Sie erhält zunächst alle Requisiten, 50 00:04:39,850 --> 00:04:45,790 die wir mit diesem netten kleinen Trick erhalten, den wir in React verwenden können, wo wir alle Requisiten 51 00:04:45,790 --> 00:04:51,700 mit dieser Verknüpfung weiterleiten, indem wir alle herausziehen die Schlüssel-Wert-Paare und übergeben sie an dieses Objekt, das diese 52 00:04:51,700 --> 00:04:53,060 Komponente am Ende ist. 53 00:04:53,110 --> 00:04:56,790 Das ist also das Erste, wir müssen alle Requisiten weiterleiten und das 54 00:04:56,800 --> 00:04:57,670 ist super 55 00:04:57,670 --> 00:05:00,470 wichtig. Vergiss das nicht, sonst funktioniert es nicht richtig. 56 00:05:00,490 --> 00:05:07,540 Der zweite Schritt ist, dass wir die Icon-Komponenten-Requisite mit einem Großbuchstaben I hinzufügen. Dies ist eine Requisite, die der Header-Button, den wir von 57 00:05:07,540 --> 00:05:13,580 diesem Paket erhalten, erwartet, und dort übergebe ich Ionicons. Dies setzt also voraus, dass 58 00:05:13,580 --> 00:05:20,730 ein Vektorsymbolpaket, das zum Rendern von Symbolen verwendet werden kann, keine Ionikons sein muss, sondern 59 00:05:20,730 --> 00:05:27,800 entweder aus @ expo / vector-icons oder aus dem zugrunde liegenden React Native-Vektorsymbolpaket, auf dem 60 00:05:27,800 --> 00:05:34,850 das Expo-Paket basiert on und Sie können auch eine Symbolgröße analysieren, und ich werde dies 61 00:05:34,850 --> 00:05:40,370 standardisieren, sodass alle meine Header-Schaltflächen in der gesamten App dieselbe Größe von 62 00:05:40,370 --> 00:05:48,470 23 haben, was ich als recht gut empfunden habe. Zu guter Letzt werde ich hier auch eine Farbe einrichten 63 00:05:49,160 --> 00:05:59,360 und meine Primärfarbe verwenden, obwohl wir natürlich sicherstellen müssen, dass wir nach Plattform unterscheiden. Daher importiere ich auch die Plattform von React Native, da 64 00:05:59,390 --> 00:06:06,210 unser Header unter Android die Primärfarbe als Hintergrund hat. Daher möchten wir dort die 65 00:06:06,210 --> 00:06:08,000 Symbolfarbe Weiß verwenden. 66 00:06:08,150 --> 00:06:15,320 Also hier werde ich die Plattform überprüfen. os, wenn das gleich Android ist, dann möchte ich hier Weiß verwenden und 67 00:06:15,360 --> 00:06:18,350 nur wenn es iOS ist, möchte ich die Primärfarbe verwenden. 68 00:06:18,470 --> 00:06:21,020 Jetzt haben wir diese vorkonfigurierte Header-Schaltfläche. Jetzt können 69 00:06:21,020 --> 00:06:26,840 wir sie an der Stelle verwenden, an der Komponente, an der wir sie unserem Header hinzufügen möchten, und in 70 00:06:26,840 --> 00:06:31,030 diesem Fall ist dies der MealDetailScreen. Dort müssen wir jetzt etwas 71 00:06:31,120 --> 00:06:34,520 anderes aus dem neu installierten Paket importieren, also müssen 72 00:06:34,720 --> 00:06:41,140 wir von React-Navigation-Header-Buttons aus diesem Paket hier Header-Buttons installieren oder importieren, also nicht die Header-Button, die wir 73 00:06:41,140 --> 00:06:47,710 in der anderen Datei verwenden aber Kopfzeilen, Plural. Wir fügen dies hier hinzu, weil 74 00:06:47,770 --> 00:06:53,650 wir jetzt dort unten, wo wir die Navigationsoptionen für diese Komponente eingerichtet haben, anstatt 75 00:06:53,650 --> 00:06:58,200 unsere Textkomponente dort zu verwenden, Kopfzeilenschaltflächen verwenden möchten. Für diese Komponente 76 00:06:58,250 --> 00:07:04,940 habe ich gerade den Import hinzugefügt und dies um ein anderes Element gewickelt, das wir haben 77 00:07:04,960 --> 00:07:11,940 aus React-Navigation-Header-Buttons zu importieren und das ist Element. Element ist eine weitere Komponente, die wir importieren 78 00:07:12,090 --> 00:07:16,710 und die wir jetzt zwischen den öffnenden und schließenden Tags der 79 00:07:16,710 --> 00:07:26,600 Kopfzeilenschaltflächen verwenden können. Hier fügen wir also Element hinzu, und Element ist eine selbstschließende Komponente, in der wir das Symbol beschreiben, das 80 00:07:26,600 --> 00:07:31,970 wir am Ende rendern möchten. Wir können diesem Titel auch einen Titel geben, der als 81 00:07:32,000 --> 00:07:35,170 Fallback gerendert wird, und ich werde diesen Favoriten benennen, aber normalerweise 82 00:07:35,180 --> 00:07:37,670 wird dies nicht angezeigt. Stattdessen kann ich hier auch 83 00:07:37,670 --> 00:07:46,280 einen Symbolnamen einrichten, und jetzt sollte dies beispielsweise ios- sein. Stern, der ein gültiges Ionikonsymbol ist, und Sie können die Liste @ expo / vector-icons durchsuchen, die ich Ihnen zuvor 84 00:07:46,280 --> 00:07:51,440 in dem Kurs gezeigt habe, den Sie auch im Anhang zu diesem Video finden, um mögliche Symbole zu 85 00:07:51,440 --> 00:07:53,570 finden, die Sie hier verwenden können. 86 00:07:53,570 --> 00:07:59,540 Stellen Sie einfach sicher, dass Sie ein Symbol aus dem Symbolsatz verwenden, den Sie in Ihren Kopfzeilenschaltflächen verwendet 87 00:07:59,540 --> 00:08:01,990 haben, also in meinem Fall aus Ionicons. 88 00:08:02,000 --> 00:08:03,830 Dies zeigt nun an, welches Symbol 89 00:08:03,830 --> 00:08:09,680 verwendet werden soll. Hier können wir auch onPress hinzufügen, um eine Funktion zu registrieren, die ausgelöst werden soll, wenn dieses Symbol 90 00:08:09,680 --> 00:08:12,570 gedrückt wird oder wenn dieses Element in der Kopfzeile gedrückt 91 00:08:12,650 --> 00:08:19,220 wird. Im Moment sage ich hier nur "Als Favorit markieren". Protokollieren Sie dies in der Konsole, damit wir sehen, dass dies funktioniert hat. 92 00:08:19,220 --> 00:08:22,720 Wir sind noch nicht ganz da, weil wir unsere benutzerdefinierte Kopfzeile 93 00:08:22,730 --> 00:08:25,870 nicht verwenden. Das ist das letzte fehlende Teil. 94 00:08:26,000 --> 00:08:28,370 Wir müssen diese von uns 95 00:08:28,430 --> 00:08:35,120 erstellte Komponente importieren, also die Header-Schaltfläche von Komponenten importieren und dann von der Header-Schaltfläche aus die Schaltfläche 96 00:08:35,120 --> 00:08:42,740 bearbeiten, die wir hier an die Header-Schaltflächen übergeben, da dies eine Komponente für die Header-Schaltflächenkomponente erwartet, auf die wir 97 00:08:42,740 --> 00:08:47,870 zeigen Komponente, die verwendet werden soll, um dieses Element am Ende zu rendern. 98 00:08:47,870 --> 00:08:52,220 Nun, das ist alles sehr komplex, wie Sie sehen können, viele verschachtelte Komponenten. Dies ist nur 99 00:08:52,220 --> 00:08:57,500 ein Setup, das beim ersten Mal etwas umständlich ist, aber wenn Sie es dann in anderen Komponenten verwenden, dreht sich 100 00:08:57,500 --> 00:09:01,790 wirklich alles nur um das Kopieren Das gleiche Setup hier, das Ändern des Titels, das Ändern 101 00:09:01,790 --> 00:09:05,860 des Symbols und das Ändern der Logik und Sie sind da. Das ist alles, was 102 00:09:05,870 --> 00:09:07,970 Sie in Zukunft tun müssen. Es ist 103 00:09:08,000 --> 00:09:12,740 nur das anfängliche Setup, das hier zusätzliche Arbeit leistet. Wenn wir dies jetzt speichern, sollten 104 00:09:12,740 --> 00:09:14,540 wir bei all 105 00:09:19,710 --> 00:09:25,770 diesen Einstellungen unseren Stern hier sehen können. Dies ist das Symbol, das wir sehen, und wir können 106 00:09:25,770 --> 00:09:35,290 es drücken. Wenn ich es drücke, wird hier in der Konsole die Markierung als Favorit angezeigt. Mal sehen, dass wir auf Android immer den Stern haben 107 00:09:35,300 --> 00:09:40,150 und wenn ich diesen Stern hier drücke, sehen wir auch die 108 00:09:40,160 --> 00:09:47,100 Markierung als Favorit, also funktioniert das. Eine kleine Randnotiz, die ich gerade gesehen habe, wenn wir mehrere Rezepte haben, möchten wir vielleicht ein zusätzliches Styling, 109 00:09:47,100 --> 00:09:52,470 das völlig unabhängig von der Kopfzeile ist, nur sehen. Also im MealItem. js Datei, auf dem Essen 110 00:09:52,470 --> 00:09:56,460 Artikel, werde ich tatsächlich einen Rand vertikal von 10 hinzufügen, wieder, 111 00:09:56,520 --> 00:10:02,520 absolut nichts, was Sie hier brauchen, nur um sicherzustellen, dass dies schöner aussieht, wenn wir mehrere Artikel 112 00:10:02,520 --> 00:10:03,050 haben. 113 00:10:03,060 --> 00:10:08,670 Wichtig hierbei ist natürlich, dass wir unsere Kopfzeile, dieses Symbol, haben. Auf diese 114 00:10:09,180 --> 00:10:13,100 Weise können Sie hier Schaltflächen oder Symbole zu Ihrer 115 00:10:13,170 --> 00:10:18,570 Kopfzeile hinzufügen und natürlich mehrere hinzufügen. Hier im Bildschirm mit den Essensdetails können 116 00:10:18,600 --> 00:10:24,770 Sie mehrere solcher Elemente zwischen den Kopfzeilenschaltflächen haben, die Sie in den Navigationsoptionen auf headerRight eingerichtet haben. 117 00:10:24,850 --> 00:10:26,220 Auf diese Weise fügen 118 00:10:26,220 --> 00:10:33,750 Sie hier Elemente hinzu. Sie können mehrere Elemente haben. Hier können Sie beispielsweise auch einen ios-Stern-Umriss verwenden. Dies ist ein weiteres Symbol, das etwas 119 00:10:33,750 --> 00:10:37,260 anders aussieht, sodass wir den Unterschied hier sehen können. Jetzt haben 120 00:10:37,260 --> 00:10:38,630 wir zwei hier . 121 00:10:38,790 --> 00:10:45,600 Das ist also möglich, natürlich sollten Sie dies nicht überladen, damit Ihre Benutzeroberfläche sauber bleibt und einfach funktioniert, 122 00:10:46,710 --> 00:10:55,010 aber so können Sie hier Symbole zu Ihrem Bildschirm hinzufügen. Übrigens, die Warnung, die ich hier bezüglich der Doppelschlüssel erhalte, der Titel 123 00:10:55,010 --> 00:10:59,910 hier wird auch als Schlüssel für Ihre Artikel verwendet. Wenn Sie also mehrere Artikel haben, 124 00:10:59,930 --> 00:11:03,350 sollten Sie nicht denselben Titel verwenden, aber ich habe 125 00:11:03,350 --> 00:11:08,640 diesen nur für hinzugefügt Demonstrationszwecke sowieso, also werde ich es einfach los und wir sind gut. 126 00:11:08,810 --> 00:11:12,290 Jetzt macht unser Sternsymbol noch nichts, das werden wir später hinzufügen, 127 00:11:12,320 --> 00:11:17,660 aber zumindest sehen wir es und das ist wirklich wichtig in einem Modul, in dem wir über 128 00:11:17,660 --> 00:11:20,300 Navigation und die Arbeit mit dem Header sprechen.