Gehen wir also zum Filterbildschirm über und dort habe ich gerade meinen Dummy-Inhalt,
den Filterbildschirm und das ist natürlich nicht
das, was ich dort will, stattdessen möchte ich dort oben Text haben, wo ich verfügbare Filter sage / Einschränkungen
oder ähnliches, wo ich auf ein bestimmtes Stilobjekt mit Stilen zeigen möchte, nennen
wir es Titel, vielleicht weil es hier unser Haupttitel ist und darunter möchte ich meine verschiedenen Filter
haben.
Wie sieht nun ein Filter aus? Wir brauchen einen Schalter, ein Kontrollkästchen, so etwas, mit
dem wir einen Filter ein- und ausschalten können, und ein Etikett dafür.
Das bedeutet, dass wahrscheinlich eine Ansicht sinnvoll ist, um die Beschriftung zu gruppieren und
diese zusammenzuschalten und nebeneinander
zu positionieren, und ich werde der Ansicht eine Art Filtercontainer geben, so etwas, und dort möchte ich, wie gesagt, möchte Haben Sie einen Text mit einer Bezeichnung, sagen Sie
zum Beispiel glutenfrei und daneben einen Schalter und dankenswerterweise hat React Native
einen eingebauten Schalter, der als Schalter bezeichnet wird. Die Schalterkomponente rendert einen schönen Schalter,
den wir verwenden können. Hier können wir also
einfach einen solchen Schalter verwenden und diesen auf dem Bildschirm rendern. Wir müssen dies konfigurieren, aber um loszulegen,
können wir es so verwenden. Lassen Sie uns nun für ein grundlegendes Styling, für den Titel
und den
Filtercontainer hier, hier unten gehen,
Filtercontainer und Titel hier hinzufügen und der Titel ist ziemlich einfach. Dort möchte ich verwenden, was Schriftfamilie
offen ohne Fettdruck und eine Schriftgröße von 22, einen Rand in alle Richtungen von 20 und auch
Text auf Mitte ausrichten, um dies zu zentrieren. Der Gesamtbildschirm sollte übrigens keine Elemente mehr auf der Hauptachse
zentrieren, so dass keine vertikale Zentrierung
mehr stattfinden sollte. Dafür
können wir einfach das Begründungscenter entfernen und der Filtercontainer sollte andererseits den Schalter und
den Text positionieren nebeneinander in einer Reihe.
Hier können wir also die Flexrichtung auf Zeilen festlegen, den Inhalt begründen, indem wir möglicherweise Leerzeichen hinzufügen und Elemente auf der Querachse in der
Mitte ausrichten, sodass sie vertikal zentriert sind. Schauen wir uns das an. Wenn wir
dies speichern und zum Filterbildschirm gehen, haben wir Folgendes. Hier haben wir einen Schalter und wie Sie jetzt sehen, springt
er immer zurück, das ist
etwas, um das wir uns in einer Sekunde kümmern müssen, aber im Allgemeinen sehen wir es und hier bei Filtern für Android
haben wir einen Android-Schalter, der auch springt zurück, aber das ist bequemerweise bereits für Android vorgefertigt, so dass dies tatsächlich
eine
weitere in React Native integrierte Komponente ist, die standardmäßig für Android aussieht. Das ist also nicht
schlecht.
Eine Sache, die ich ändern möchte, ist für den Filtercontainer. Ich möchte eine
feste Breite von beispielsweise 80% zuweisen und diese hier tatsächlich in Leerzeichen zwischen und nicht
um Leerzeichen
herum ändern, da ich denke, dass das jetzt ein bisschen schöner aussieht, ja definitiv auch Unter Android und jetzt können wir sicherstellen, dass dieser Schalter tatsächlich
funktioniert und nicht zurückspringt, wenn wir ihn auslösen. Dazu müssen Sie wissen, dass Sie für Switches ihren Status manuell
verwalten müssen, und das ist eigentlich nicht neu. In React ist es häufig der Fall, dass Sie für diese Eingabekomponenten
speichern müssen, was der Benutzer eingibt, und dies in das System zurückspeisen müssen Komponente, um dies in der aktualisierten
Benutzeroberfläche widerzuspiegeln, und wir
tun dies mit der Statusverwaltung.
Wir importieren also, um den Status-Hook von React zu verwenden, damit wir den Status hier
in dieser Funktionskomponente verwalten können. Hier habe ich meinen Gluten-Status und benenne diesen isGlutenFree und setze den isGlutenFree-Verwendungsstatus. Anfangs ist das falsch und jetzt Wenn Sie diesen
Schalter hier haben, haben Sie eine
value-Eigenschaft. Dies ist
eine Eigenschaft, die in den integrierten Schalter integriert ist, in den ich isGlutenFree eingebe. Daher wird ein Boolescher Wert
verwendet, der angibt, ob dieser Schalter als aktiv oder nicht aktiv dargestellt wird. Wenn er also als aktiviert
markiert ist oder nicht aktiviert Ich sollte sagen, und Sie haben eine onValueChange-Eigenschaft, die eine
Funktion übernimmt, die ausgelöst wird, wenn der
Benutzer auf diesen Schalter klickt. Diese Funktion erhält hier den neuen
Wert. Wenn sich der Schalter also im falschen Modus befand, ist der neue Wert im Uncheck-Modus wahr und umgekehrt,
und wir können damit unseren Status aktualisieren und isGlutenFree auf den Wert setzen neuer Wert und da
wir diesen Status auch wieder einspeisen, sollte unser Schalter jetzt änderbar sein und in diesem
aktualisierten Modus bleiben.
Wenn wir uns das jetzt ansehen, können wir diesen Schalter wirklich umschalten, und das ist eine Verbesserung.
Das Styling des Schalters ist nicht das, was ich will, es verwendet
jedoch eine Standardfarbe. Natürlich möchte ich meine Farben verwenden, die ich
ständig in der App verwende, und dafür können wir unsere
Farben natürlich konstant importieren Importieren Sie Farben aus Konstanten / Farben, und der Schalter verfügt über eine weitere Eigenschaft, die uns beim Stylen hilft. Wir können
hier eine Spurfarbe hinzufügen, mit der wir die Farben für diesen Schalter anpassen können, sodass
die Hintergrundfarbe usw. und die Spurfarbe ein Objekt als Objekt annehmen Wert, daher haben wir ein Objekt, das wir hier an diese
dynamische Bindung übergeben, wo Sie eine Hintergrundfarbe für den falschen Status festlegen können. Wenn es also inaktiv
ist, wenn es deaktiviert ist und ich mit der Standardeinstellung einverstanden bin, sieht dies gut
aus
Ich kann aber auch einen für den wahren Fall festlegen, der
aktiviert ist, und dort möchte ich Farben, Primärfarben verwenden und natürlich können Sie jede gewünschte Farbe nehmen.
Und wenn wir das tun und ich zurück zu den Filtern gehe, verwenden wir hier jetzt unsere eigene Farbe, die
natürlich mehr mit dem Rest
dieser Anwendung übereinstimmt, und dies wird natürlich auch hier auf Android funktionieren. Wir können hier auch die Daumenfarbe einstellen, die die Farbe dieses
Daumens ist, der hier auf Android grün ist, und dies erfordert nur eine Zeichenfolge, eine Farbzeichenfolge, also einen Hex-Code. Dort können
wir auch auf die Primärfarbe der Farben zeigen und wenn Wir machen das, auf iOS, jetzt hat es
diese Farbe und die gleiche
auf Android.
Jetzt unter iOS sieht das natürlich nicht wirklich gut aus,
da möchte ich die Standardeinstellung beibehalten und die Lösung ist
ziemlich einfach. Wir können wieder die gute alte Plattform-API verwenden, diese importieren und dann hier, wenn
wir eine Daumenfarbe zuweisen Ich überprüfe die Plattform. OS ist gleich Android. In diesem Fall möchte ich die Primärfarbe für meinen Daumen
verwenden. Andernfalls setze ich diese auf eine leere Zeichenfolge, was bedeutet, dass unter iOS die Standardfarbe Weiß verwendet wird.
Und damit haben wir hier das gleiche Aussehen wie zuvor, das ich unter iOS mag, aber natürlich
können Sie dies auch
an Ihre Anforderungen anpassen, und unter Android werden wir immer noch das Aussehen haben, das wir zuvor gesehen haben, wenn ich zum
Filter gehe Bildschirm hier, der auch dort gut aussieht. Das ist also der Schalter und wie wir
ihn hinzufügen können. Jetzt müssen wir dies nur noch für alle anderen Schalter
wiederholen, also für alle anderen Filter, die ich meine. Ich kann diese Ansicht also kopieren und
erneut
für laktosefrei oder vegan hinzufügen. Wenn Sie jedoch feststellen, dass Sie sie hier immer
wieder kopieren und einfügen, ist dies immer ein guter Fall, um eine separate Komponente oder eine zu erstellen Funktion,
die diesen wiederverwendbaren Code rendert.
Und auch hier werde ich eine separate Komponente in derselben Datei erstellen, da ich sie wirklich nur
dort
verwende. Sie können auch eine separate Datei verwenden, wenn Sie möchten.
Ich werde es Filterschalter nennen und dies bekommt einige Requisiten und in dieser
Komponente, am Ende gebe ich diesen Code zurück, haben wir ein für mit der Ansicht und dem Text und so weiter
eingerichtet
und natürlich muss der Text jetzt dynamisch sein. Dort könnten wir dies auf Requisiten-Label setzen
und es liegt ganz bei Ihnen, was Sie hier auswählen, da Sie sowieso später
die Requisitenwerte übergeben werden und natürlich hier auch, was bei ValueChange passiert und was wir an Wert übergeben.
Hier sollte dies beispielsweise der Requisitenstatus oder der Requisitenwert oder was auch immer Sie verwenden möchten sein, und hier
für onValueChange zeige ich einfach auf Requisiten. onChange zum Beispiel, aber auch hier liegen natürlich
alle diese Requisitennamen ganz bei Ihnen, denn Sie werden derjenige sein, der
diese Komponente verwendet, und wir werden sie jetzt tatsächlich hier verwenden, also diese selbstschließende Komponente, in der wir jetzt eine Beschriftung festlegen können
Da ich hier eine Label-Requisite erwarte, müssen Sie sie hier
natürlich anders benennen, wenn Sie
sie anders benannt haben, und das Label lautet natürlich GlutenFree, da ich diesen Schalter hier ersetzen werde.
Dann müssen wir einen Status übergeben, da ich hier eine Status-Requisite hinzugefügt habe, um meinen Wert zu verwalten. Wenn
Sie ihn anders benannt haben, müssen Sie ihn dort unten auch
anders benennen, und hier werde ich auf isGlutenFree, meinen Status
und die Anforderungen von onChange verweisen
bereitgestellt werden, da ich hier die onChange-Requisite verwende, um sie an onValueChange zu binden.
Dies sollte also auf eine Funktion verweisen, und natürlich werde ich diese Funktion hier einfach
beibehalten. Da ich hier nur onChange verwende, um sie an onValueChange weiterzuleiten, erhalten wir auch hier das neue Wertargument.
Jetzt können wir diese Ansicht dort unten loswerden und einfach unsere Filterschalterkomponente verwenden und jetzt einfach
das wiederholen, was natürlich viel einfacher ist.
Jetzt können wir hier auch laktosefrei, vegan und vegetarisch haben und wir müssen jetzt drei
neue Zustände hinzufügen. Lassen Sie mich dies hier wiederholen. Wir haben isLactoseFree und setzen isLactoseFree, hier
haben wir isVegan und setzen isVegan und
hier haben wir isVegetarian und
und setze isVegetarian.
Jetzt müssen wir nur noch sicherstellen, dass wir die Zustände an den richtigen Stellen verwenden. Für den
zweiten Filterschalter, bei dem wir den lactoseFree-Filter haben, leite ich den
isLactoseFree-Zustand weiter und aktualisiere den Satz isLactoseFree natürlich. Für den veganen Switch leite
ich isVegan weiter und wir aktualisieren es mit set isVegan und für Vegetarier leiten wir isVegetarian
weiter und wir aktualisieren set isVegetarian wie folgt.
OK,
das sollte es sein, wenn wir dies jetzt speichern, sollten wir einen Filterbildschirm mit unseren verschiedenen Filtern haben, den wir
unabhängig einstellen können, weil wir unabhängige Zustände haben. Ich denke, wäre es schön, einen gewissen Abstand
zwischen diesen Zeilen zu haben, also lassen Sie uns dies implementieren. Auf unserem Filtercontainer hier können wir einfach einen vertikalen
Rand von 10 oder 50 hinzufügen, vielleicht ein bisschen mehr, und dies sollte sicherstellen, dass wir dort einen gewissen
Abstand haben, ja,
und das sieht ganz gut aus.