Das Hinzufügen einer Schaltfläche zur Kopfzeile, wie ich sie hier haben möchte, wie z. B. einer
Navigationsschaltfläche, erfordert zunächst ein wenig zusätzliche Arbeit, ist danach jedoch sehr einfach.
Wir müssen zunächst ein zusätzliches Paket installieren, um dies zu vereinfachen, da Sie hier theoretisch
viel Leistung haben.
Sie können solche Schaltflächen mithilfe der Navigationsoptionen hinzufügen. Hier
auf dem MealDetailScreen können Sie neben dem Festlegen eines Headertitels auch headerLeft und headerRight festlegen, um
Schaltflächen links und rechts vom Titel hinzuzufügen.
Normalerweise möchten Sie rechts verwenden, da das linke für die Schaltfläche "Zurück" reserviert ist. Im Allgemeinen
können Sie dort einfach ein jsx-Element zurückgeben,
sodass Sie dies einfach auf "Text" wie "Favorit" setzen können. Dies können Sie hier tun und mich tatsächlich lassen Zeigen Sie
dies und starten Sie den Server neu, bevor wir ein Paket verwenden,
denn während Sie hier nur eine Komponente hinzufügen können, erhalten Sie das richtige Design und die richtige Positionierung für
alle verschiedenen Plattformen, insbesondere wenn Sie hier nicht nur Text verwenden, sondern auch Vielleicht ein Symbol, das
Sie normalerweise dort haben möchten, das sehr umständlich sein kann, und deshalb installieren wir ein
zusätzliches Paket, das dies einfacher macht als es sonst ist.
Lassen Sie mich dies mit npm start neu starten, nicht mit npm install, npm start und wenn es wieder
läuft, lassen Sie uns dies hier auf iOS neu laden und Ihnen zeigen, was wir hier haben, nachdem ich einen Text gerendert habe.
Sie sehen diesen Text
hier, also wird
er gerendert, aber wie gesagt, mit der richtigen Polsterung, der richtigen Ausrichtung, dem richtigen Stil, der richtigen Größe, super
nervig, wenn Sie alles alleine machen, weil Sie es nicht nur tun Dies gilt für ein
Gerät, aber für viele Geräte.
Deshalb installieren wir hier tatsächlich ein spezielles Paket, das uns dabei hilft.
Beenden Sie also vorerst den Prozess, den laufenden Entwicklungsprozess, und verwenden Sie npm
install --save und installieren Sie das Paket react-navigation-header-keys. Dieses Paket hilft Ihnen überraschenderweise beim Einrichten, wenn Sie
sich den Namen ansehen Einige Schaltflächen in Ihrer Kopfzeile, also in
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
meinen Entwicklungsserver mit npm start neu und erstelle jetzt selbst eine neue Hilfskomponente im Komponentenordner,
die ich als Helfer bezeichne, eine Header-Schaltfläche, keine Helfer-Header-Schaltfläche. Dort importiere ich React from
React, da dies eine normale React-Komponente ist, die wir dort erstellen,
und importiere etwas aus diesem neuen React-Navigation-Header-Buttons-Paket, das wir gerade installiert haben,
und das, was ich importiere, ist die Header-Button. Außerdem importieren wir etwas aus @ expo / vector-icons, das verfügbar sein sollte,
aber um sicherzugehen, können Sie auf jeden Fall auch npm install --save @ expo /
vector-icons ausführen, um dieses Paket ebenfalls zu installieren, weil Sie ' Ich brauche das und das, was wir aus
diesem Paket importieren müssen, sind Ionics. Natürlich können Sie jedes gewünschte Icon-Set verwenden.
Ich habe die Icons bereits in diesem Kurs behandelt und Sie können jedes gewünschte Icon in Ihrer
Header-Schaltfläche verwenden. Ich werde nur mit Ionicons arbeiten, da ich sie im Rest von verwende
Auch in diesem Kurs können Sie beliebige Symbole verwenden. In der Kopfzeile müssen Sie natürlich
keine Symbole verwenden. Sie können auch anderen Text verwenden. In der Regel verwenden Sie jedoch natürlich Symbole,
genau das verwenden Benutzer werden normalerweise von anderen Apps verwendet.
Außerdem importiere ich auch Farben aus Konstanten / Farben und erstelle jetzt meine Komponente hier. Das ist beispielsweise die benutzerdefinierte Kopfzeilenschaltfläche oder
nur die Kopfzeilenschaltfläche, wie auch immer Sie sie benennen möchten, aber wir importieren sie bereits, also wir Ich
muss hier einen anderen Namen auswählen, um keinen Namenskonflikt zu haben.
Dies wird einige Requisiten erhalten und den Header-Button zurückgeben, den wir von diesem Paket erhalten, das wir installiert haben, aber wir
werden bald eine zusätzliche Konfiguration hinzufügen, weshalb ich es bin Wenn Sie dies
in eine separate Komponente einbinden, damit wir diese Konfiguration nicht für jede Schaltfläche wiederholen müssen,
die wir
irgendwo in der App verwenden, exportiere ich natürlich meine benutzerdefinierte Standard-Header-Schaltfläche.
Nun benutze ich diese Header-Schaltfläche, die ich hier aus diesem von uns installierten Paket verwende. Sie erhält zunächst alle Requisiten,
die wir mit diesem netten kleinen Trick erhalten, den wir in React verwenden können, wo wir alle Requisiten
mit dieser Verknüpfung weiterleiten, indem wir alle herausziehen die Schlüssel-Wert-Paare und übergeben sie an dieses Objekt, das diese
Komponente am Ende ist.
Das ist also das Erste, wir müssen alle Requisiten weiterleiten und das
ist super
wichtig. Vergiss das nicht, sonst funktioniert es nicht richtig.
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
diesem Paket erhalten, erwartet, und dort übergebe ich Ionicons. Dies setzt also voraus, dass
ein Vektorsymbolpaket, das zum Rendern von Symbolen verwendet werden kann, keine Ionikons sein muss, sondern
entweder aus @ expo / vector-icons oder aus dem zugrunde liegenden React Native-Vektorsymbolpaket, auf dem
das Expo-Paket basiert on und Sie können auch eine Symbolgröße analysieren, und ich werde dies
standardisieren, sodass alle meine Header-Schaltflächen in der gesamten App dieselbe Größe von
23 haben, was ich als recht gut empfunden habe. Zu guter Letzt werde ich hier auch eine Farbe einrichten
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
unser Header unter Android die Primärfarbe als Hintergrund hat. Daher möchten wir dort die
Symbolfarbe Weiß verwenden.
Also hier werde ich die Plattform überprüfen. os, wenn das gleich Android ist, dann möchte ich hier Weiß verwenden und
nur wenn es iOS ist, möchte ich die Primärfarbe verwenden.
Jetzt haben wir diese vorkonfigurierte Header-Schaltfläche. Jetzt können
wir sie an der Stelle verwenden, an der Komponente, an der wir sie unserem Header hinzufügen möchten, und in
diesem Fall ist dies der MealDetailScreen. Dort müssen wir jetzt etwas
anderes aus dem neu installierten Paket importieren, also müssen
wir von React-Navigation-Header-Buttons aus diesem Paket hier Header-Buttons installieren oder importieren, also nicht die Header-Button, die wir
in der anderen Datei verwenden aber Kopfzeilen, Plural. Wir fügen dies hier hinzu, weil
wir jetzt dort unten, wo wir die Navigationsoptionen für diese Komponente eingerichtet haben, anstatt
unsere Textkomponente dort zu verwenden, Kopfzeilenschaltflächen verwenden möchten. Für diese Komponente
habe ich gerade den Import hinzugefügt und dies um ein anderes Element gewickelt, das wir haben
aus React-Navigation-Header-Buttons zu importieren und das ist Element. Element ist eine weitere Komponente, die wir importieren
und die wir jetzt zwischen den öffnenden und schließenden Tags der
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
wir am Ende rendern möchten. Wir können diesem Titel auch einen Titel geben, der als
Fallback gerendert wird, und ich werde diesen Favoriten benennen, aber normalerweise
wird dies nicht angezeigt. Stattdessen kann ich hier auch
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
in dem Kurs gezeigt habe, den Sie auch im Anhang zu diesem Video finden, um mögliche Symbole zu
finden, die Sie hier verwenden können.
Stellen Sie einfach sicher, dass Sie ein Symbol aus dem Symbolsatz verwenden, den Sie in Ihren Kopfzeilenschaltflächen verwendet
haben, also in meinem Fall aus Ionicons.
Dies zeigt nun an, welches Symbol
verwendet werden soll. Hier können wir auch onPress hinzufügen, um eine Funktion zu registrieren, die ausgelöst werden soll, wenn dieses Symbol
gedrückt wird oder wenn dieses Element in der Kopfzeile gedrückt
wird. Im Moment sage ich hier nur "Als Favorit markieren". Protokollieren Sie dies in der Konsole, damit wir sehen, dass dies funktioniert hat.
Wir sind noch nicht ganz da, weil wir unsere benutzerdefinierte Kopfzeile
nicht verwenden. Das ist das letzte fehlende Teil.
Wir müssen diese von uns
erstellte Komponente importieren, also die Header-Schaltfläche von Komponenten importieren und dann von der Header-Schaltfläche aus die Schaltfläche
bearbeiten, die wir hier an die Header-Schaltflächen übergeben, da dies eine Komponente für die Header-Schaltflächenkomponente erwartet, auf die wir
zeigen Komponente, die verwendet werden soll, um dieses Element am Ende zu rendern.
Nun, das ist alles sehr komplex, wie Sie sehen können, viele verschachtelte Komponenten. Dies ist nur
ein Setup, das beim ersten Mal etwas umständlich ist, aber wenn Sie es dann in anderen Komponenten verwenden, dreht sich
wirklich alles nur um das Kopieren Das gleiche Setup hier, das Ändern des Titels, das Ändern
des Symbols und das Ändern der Logik und Sie sind da. Das ist alles, was
Sie in Zukunft tun müssen. Es ist
nur das anfängliche Setup, das hier zusätzliche Arbeit leistet. Wenn wir dies jetzt speichern, sollten
wir bei all
diesen Einstellungen unseren Stern hier sehen können. Dies ist das Symbol, das wir sehen, und wir können
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
und wenn ich diesen Stern hier drücke, sehen wir auch die
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,
das völlig unabhängig von der Kopfzeile ist, nur sehen. Also im MealItem. js Datei, auf dem Essen
Artikel, werde ich tatsächlich einen Rand vertikal von 10 hinzufügen, wieder,
absolut nichts, was Sie hier brauchen, nur um sicherzustellen, dass dies schöner aussieht, wenn wir mehrere Artikel
haben.
Wichtig hierbei ist natürlich, dass wir unsere Kopfzeile, dieses Symbol, haben. Auf diese
Weise können Sie hier Schaltflächen oder Symbole zu Ihrer
Kopfzeile hinzufügen und natürlich mehrere hinzufügen. Hier im Bildschirm mit den Essensdetails können
Sie mehrere solcher Elemente zwischen den Kopfzeilenschaltflächen haben, die Sie in den Navigationsoptionen auf headerRight eingerichtet haben.
Auf diese Weise fügen
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
anders aussieht, sodass wir den Unterschied hier sehen können. Jetzt haben
wir zwei hier .
Das ist also möglich, natürlich sollten Sie dies nicht überladen, damit Ihre Benutzeroberfläche sauber bleibt und einfach funktioniert,
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
hier wird auch als Schlüssel für Ihre Artikel verwendet. Wenn Sie also mehrere Artikel haben,
sollten Sie nicht denselben Titel verwenden, aber ich habe
diesen nur für hinzugefügt Demonstrationszwecke sowieso, also werde ich es einfach los und wir sind gut.
Jetzt macht unser Sternsymbol noch nichts, das werden wir später hinzufügen,
aber zumindest sehen wir es und das ist wirklich wichtig in einem Modul, in dem wir über
Navigation und die Arbeit mit dem Header sprechen.