1 00:00:02,390 --> 00:00:08,060 Gehen wir also zum Filterbildschirm über und dort habe ich gerade meinen Dummy-Inhalt, 2 00:00:08,060 --> 00:00:11,420 den Filterbildschirm und das ist natürlich nicht 3 00:00:11,510 --> 00:00:20,060 das, was ich dort will, stattdessen möchte ich dort oben Text haben, wo ich verfügbare Filter sage / Einschränkungen 4 00:00:20,060 --> 00:00:25,910 oder ähnliches, wo ich auf ein bestimmtes Stilobjekt mit Stilen zeigen möchte, nennen 5 00:00:25,910 --> 00:00:33,560 wir es Titel, vielleicht weil es hier unser Haupttitel ist und darunter möchte ich meine verschiedenen Filter 6 00:00:33,560 --> 00:00:34,250 haben. 7 00:00:34,250 --> 00:00:41,180 Wie sieht nun ein Filter aus? Wir brauchen einen Schalter, ein Kontrollkästchen, so etwas, mit 8 00:00:41,180 --> 00:00:45,210 dem wir einen Filter ein- und ausschalten können, und ein Etikett dafür. 9 00:00:45,230 --> 00:00:50,840 Das bedeutet, dass wahrscheinlich eine Ansicht sinnvoll ist, um die Beschriftung zu gruppieren und 10 00:00:50,840 --> 00:00:52,970 diese zusammenzuschalten und nebeneinander 11 00:00:52,970 --> 00:01:04,560 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 12 00:01:04,560 --> 00:01:09,300 zum Beispiel glutenfrei und daneben einen Schalter und dankenswerterweise hat React Native 13 00:01:10,050 --> 00:01:16,080 einen eingebauten Schalter, der als Schalter bezeichnet wird. Die Schalterkomponente rendert einen schönen Schalter, 14 00:01:16,080 --> 00:01:19,140 den wir verwenden können. Hier können wir also 15 00:01:19,140 --> 00:01:28,180 einfach einen solchen Schalter verwenden und diesen auf dem Bildschirm rendern. Wir müssen dies konfigurieren, aber um loszulegen, 16 00:01:28,210 --> 00:01:36,520 können wir es so verwenden. Lassen Sie uns nun für ein grundlegendes Styling, für den Titel 17 00:01:36,520 --> 00:01:37,780 und den 18 00:01:37,780 --> 00:01:39,490 Filtercontainer hier, hier unten gehen, 19 00:01:39,490 --> 00:01:48,040 Filtercontainer und Titel hier hinzufügen und der Titel ist ziemlich einfach. Dort möchte ich verwenden, was Schriftfamilie 20 00:01:48,120 --> 00:01:58,410 offen ohne Fettdruck und eine Schriftgröße von 22, einen Rand in alle Richtungen von 20 und auch 21 00:01:58,550 --> 00:02:08,580 Text auf Mitte ausrichten, um dies zu zentrieren. Der Gesamtbildschirm sollte übrigens keine Elemente mehr auf der Hauptachse 22 00:02:08,610 --> 00:02:11,530 zentrieren, so dass keine vertikale Zentrierung 23 00:02:11,700 --> 00:02:14,330 mehr stattfinden sollte. Dafür 24 00:02:14,460 --> 00:02:21,610 können wir einfach das Begründungscenter entfernen und der Filtercontainer sollte andererseits den Schalter und 25 00:02:21,640 --> 00:02:24,970 den Text positionieren nebeneinander in einer Reihe. 26 00:02:24,970 --> 00:02:34,060 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 27 00:02:34,060 --> 00:02:40,080 Mitte ausrichten, sodass sie vertikal zentriert sind. Schauen wir uns das an. Wenn wir 28 00:02:40,080 --> 00:02:46,290 dies speichern und zum Filterbildschirm gehen, haben wir Folgendes. Hier haben wir einen Schalter und wie Sie jetzt sehen, springt 29 00:02:46,290 --> 00:02:47,460 er immer zurück, das ist 30 00:02:47,460 --> 00:02:53,130 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 31 00:02:53,130 --> 00:02:58,380 haben wir einen Android-Schalter, der auch springt zurück, aber das ist bequemerweise bereits für Android vorgefertigt, so dass dies tatsächlich 32 00:02:58,380 --> 00:02:58,920 eine 33 00:02:58,920 --> 00:03:05,300 weitere in React Native integrierte Komponente ist, die standardmäßig für Android aussieht. Das ist also nicht 34 00:03:05,300 --> 00:03:07,240 schlecht. 35 00:03:07,250 --> 00:03:13,070 Eine Sache, die ich ändern möchte, ist für den Filtercontainer. Ich möchte eine 36 00:03:13,070 --> 00:03:19,430 feste Breite von beispielsweise 80% zuweisen und diese hier tatsächlich in Leerzeichen zwischen und nicht 37 00:03:19,430 --> 00:03:20,480 um Leerzeichen 38 00:03:20,480 --> 00:03:32,030 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 39 00:03:32,030 --> 00:03:39,440 funktioniert und nicht zurückspringt, wenn wir ihn auslösen. Dazu müssen Sie wissen, dass Sie für Switches ihren Status manuell 40 00:03:39,440 --> 00:03:46,130 verwalten müssen, und das ist eigentlich nicht neu. In React ist es häufig der Fall, dass Sie für diese Eingabekomponenten 41 00:03:46,670 --> 00:03:53,120 speichern müssen, was der Benutzer eingibt, und dies in das System zurückspeisen müssen Komponente, um dies in der aktualisierten 42 00:03:53,210 --> 00:03:54,790 Benutzeroberfläche widerzuspiegeln, und wir 43 00:03:55,130 --> 00:03:57,080 tun dies mit der Statusverwaltung. 44 00:03:57,100 --> 00:04:03,040 Wir importieren also, um den Status-Hook von React zu verwenden, damit wir den Status hier 45 00:04:03,290 --> 00:04:13,770 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 46 00:04:14,660 --> 00:04:16,930 Schalter hier haben, haben Sie eine 47 00:04:17,150 --> 00:04:18,800 value-Eigenschaft. Dies ist 48 00:04:22,330 --> 00:04:29,650 eine Eigenschaft, die in den integrierten Schalter integriert ist, in den ich isGlutenFree eingebe. Daher wird ein Boolescher Wert 49 00:04:29,650 --> 00:04:36,640 verwendet, der angibt, ob dieser Schalter als aktiv oder nicht aktiv dargestellt wird. Wenn er also als aktiviert 50 00:04:36,640 --> 00:04:42,550 markiert ist oder nicht aktiviert Ich sollte sagen, und Sie haben eine onValueChange-Eigenschaft, die eine 51 00:04:42,550 --> 00:04:45,160 Funktion übernimmt, die ausgelöst wird, wenn der 52 00:04:45,160 --> 00:04:49,520 Benutzer auf diesen Schalter klickt. Diese Funktion erhält hier den neuen 53 00:04:49,610 --> 00:04:56,480 Wert. Wenn sich der Schalter also im falschen Modus befand, ist der neue Wert im Uncheck-Modus wahr und umgekehrt, 54 00:04:56,480 --> 00:05:02,750 und wir können damit unseren Status aktualisieren und isGlutenFree auf den Wert setzen neuer Wert und da 55 00:05:03,110 --> 00:05:09,050 wir diesen Status auch wieder einspeisen, sollte unser Schalter jetzt änderbar sein und in diesem 56 00:05:09,290 --> 00:05:10,800 aktualisierten Modus bleiben. 57 00:05:10,820 --> 00:05:17,430 Wenn wir uns das jetzt ansehen, können wir diesen Schalter wirklich umschalten, und das ist eine Verbesserung. 58 00:05:17,450 --> 00:05:21,800 Das Styling des Schalters ist nicht das, was ich will, es verwendet 59 00:05:21,800 --> 00:05:26,010 jedoch eine Standardfarbe. Natürlich möchte ich meine Farben verwenden, die ich 60 00:05:26,180 --> 00:05:30,020 ständig in der App verwende, und dafür können wir unsere 61 00:05:30,020 --> 00:05:39,140 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 62 00:05:39,710 --> 00:05:45,130 hier eine Spurfarbe hinzufügen, mit der wir die Farben für diesen Schalter anpassen können, sodass 63 00:05:45,140 --> 00:05:52,910 die Hintergrundfarbe usw. und die Spurfarbe ein Objekt als Objekt annehmen Wert, daher haben wir ein Objekt, das wir hier an diese 64 00:05:52,910 --> 00:05:59,030 dynamische Bindung übergeben, wo Sie eine Hintergrundfarbe für den falschen Status festlegen können. Wenn es also inaktiv 65 00:05:59,030 --> 00:06:04,490 ist, wenn es deaktiviert ist und ich mit der Standardeinstellung einverstanden bin, sieht dies gut 66 00:06:04,490 --> 00:06:05,270 aus 67 00:06:05,660 --> 00:06:09,570 Ich kann aber auch einen für den wahren Fall festlegen, der 68 00:06:09,740 --> 00:06:15,680 aktiviert ist, und dort möchte ich Farben, Primärfarben verwenden und natürlich können Sie jede gewünschte Farbe nehmen. 69 00:06:15,680 --> 00:06:22,580 Und wenn wir das tun und ich zurück zu den Filtern gehe, verwenden wir hier jetzt unsere eigene Farbe, die 70 00:06:22,580 --> 00:06:24,740 natürlich mehr mit dem Rest 71 00:06:24,740 --> 00:06:33,340 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 72 00:06:33,340 --> 00:06:41,290 Daumens ist, der hier auf Android grün ist, und dies erfordert nur eine Zeichenfolge, eine Farbzeichenfolge, also einen Hex-Code. Dort können 73 00:06:42,410 --> 00:06:49,530 wir auch auf die Primärfarbe der Farben zeigen und wenn Wir machen das, auf iOS, jetzt hat es 74 00:06:49,530 --> 00:06:51,270 diese Farbe und die gleiche 75 00:06:55,710 --> 00:06:56,820 auf Android. 76 00:06:59,660 --> 00:07:03,420 Jetzt unter iOS sieht das natürlich nicht wirklich gut aus, 77 00:07:03,420 --> 00:07:07,480 da möchte ich die Standardeinstellung beibehalten und die Lösung ist 78 00:07:07,500 --> 00:07:13,620 ziemlich einfach. Wir können wieder die gute alte Plattform-API verwenden, diese importieren und dann hier, wenn 79 00:07:13,620 --> 00:07:21,000 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 80 00:07:21,480 --> 00:07:26,410 verwenden. Andernfalls setze ich diese auf eine leere Zeichenfolge, was bedeutet, dass unter iOS die Standardfarbe Weiß verwendet wird. 81 00:07:26,510 --> 00:07:31,650 Und damit haben wir hier das gleiche Aussehen wie zuvor, das ich unter iOS mag, aber natürlich 82 00:07:31,650 --> 00:07:33,300 können Sie dies auch 83 00:07:33,300 --> 00:07:40,140 an Ihre Anforderungen anpassen, und unter Android werden wir immer noch das Aussehen haben, das wir zuvor gesehen haben, wenn ich zum 84 00:07:40,140 --> 00:07:45,650 Filter gehe Bildschirm hier, der auch dort gut aussieht. Das ist also der Schalter und wie wir 85 00:07:45,950 --> 00:07:50,060 ihn hinzufügen können. Jetzt müssen wir dies nur noch für alle anderen Schalter 86 00:07:50,120 --> 00:07:55,700 wiederholen, also für alle anderen Filter, die ich meine. Ich kann diese Ansicht also kopieren und 87 00:07:55,700 --> 00:07:56,430 erneut 88 00:07:56,990 --> 00:08:01,960 für laktosefrei oder vegan hinzufügen. Wenn Sie jedoch feststellen, dass Sie sie hier immer 89 00:08:02,090 --> 00:08:08,900 wieder kopieren und einfügen, ist dies immer ein guter Fall, um eine separate Komponente oder eine zu erstellen Funktion, 90 00:08:08,900 --> 00:08:10,680 die diesen wiederverwendbaren Code rendert. 91 00:08:10,730 --> 00:08:15,590 Und auch hier werde ich eine separate Komponente in derselben Datei erstellen, da ich sie wirklich nur 92 00:08:15,590 --> 00:08:16,040 dort 93 00:08:16,040 --> 00:08:19,150 verwende. Sie können auch eine separate Datei verwenden, wenn Sie möchten. 94 00:08:19,390 --> 00:08:23,720 Ich werde es Filterschalter nennen und dies bekommt einige Requisiten und in dieser 95 00:08:23,720 --> 00:08:30,820 Komponente, am Ende gebe ich diesen Code zurück, haben wir ein für mit der Ansicht und dem Text und so weiter 96 00:08:30,820 --> 00:08:31,410 eingerichtet 97 00:08:31,610 --> 00:08:37,100 und natürlich muss der Text jetzt dynamisch sein. Dort könnten wir dies auf Requisiten-Label setzen 98 00:08:37,100 --> 00:08:41,810 und es liegt ganz bei Ihnen, was Sie hier auswählen, da Sie sowieso später 99 00:08:43,050 --> 00:08:48,930 die Requisitenwerte übergeben werden und natürlich hier auch, was bei ValueChange passiert und was wir an Wert übergeben. 100 00:08:48,930 --> 00:08:57,230 Hier sollte dies beispielsweise der Requisitenstatus oder der Requisitenwert oder was auch immer Sie verwenden möchten sein, und hier 101 00:08:57,310 --> 00:09:03,490 für onValueChange zeige ich einfach auf Requisiten. onChange zum Beispiel, aber auch hier liegen natürlich 102 00:09:03,490 --> 00:09:08,140 alle diese Requisitennamen ganz bei Ihnen, denn Sie werden derjenige sein, der 103 00:09:08,140 --> 00:09:16,870 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 104 00:09:16,870 --> 00:09:20,730 Da ich hier eine Label-Requisite erwarte, müssen Sie sie hier 105 00:09:20,800 --> 00:09:22,990 natürlich anders benennen, wenn Sie 106 00:09:22,990 --> 00:09:29,230 sie anders benannt haben, und das Label lautet natürlich GlutenFree, da ich diesen Schalter hier ersetzen werde. 107 00:09:29,380 --> 00:09:35,830 Dann müssen wir einen Status übergeben, da ich hier eine Status-Requisite hinzugefügt habe, um meinen Wert zu verwalten. Wenn 108 00:09:35,830 --> 00:09:39,610 Sie ihn anders benannt haben, müssen Sie ihn dort unten auch 109 00:09:39,620 --> 00:09:42,970 anders benennen, und hier werde ich auf isGlutenFree, meinen Status 110 00:09:42,970 --> 00:09:45,120 und die Anforderungen von onChange verweisen 111 00:09:45,130 --> 00:09:49,840 bereitgestellt werden, da ich hier die onChange-Requisite verwende, um sie an onValueChange zu binden. 112 00:09:49,840 --> 00:09:55,990 Dies sollte also auf eine Funktion verweisen, und natürlich werde ich diese Funktion hier einfach 113 00:09:55,990 --> 00:10:03,550 beibehalten. Da ich hier nur onChange verwende, um sie an onValueChange weiterzuleiten, erhalten wir auch hier das neue Wertargument. 114 00:10:04,870 --> 00:10:10,480 Jetzt können wir diese Ansicht dort unten loswerden und einfach unsere Filterschalterkomponente verwenden und jetzt einfach 115 00:10:10,510 --> 00:10:13,270 das wiederholen, was natürlich viel einfacher ist. 116 00:10:13,270 --> 00:10:23,450 Jetzt können wir hier auch laktosefrei, vegan und vegetarisch haben und wir müssen jetzt drei 117 00:10:24,490 --> 00:10:34,740 neue Zustände hinzufügen. Lassen Sie mich dies hier wiederholen. Wir haben isLactoseFree und setzen isLactoseFree, hier 118 00:10:34,740 --> 00:10:39,210 haben wir isVegan und setzen isVegan und 119 00:10:39,270 --> 00:10:42,720 hier haben wir isVegetarian und 120 00:10:48,010 --> 00:10:51,000 und setze isVegetarian. 121 00:10:51,020 --> 00:10:57,740 Jetzt müssen wir nur noch sicherstellen, dass wir die Zustände an den richtigen Stellen verwenden. Für den 122 00:10:57,760 --> 00:11:02,220 zweiten Filterschalter, bei dem wir den lactoseFree-Filter haben, leite ich den 123 00:11:02,250 --> 00:11:09,100 isLactoseFree-Zustand weiter und aktualisiere den Satz isLactoseFree natürlich. Für den veganen Switch leite 124 00:11:09,160 --> 00:11:17,980 ich isVegan weiter und wir aktualisieren es mit set isVegan und für Vegetarier leiten wir isVegetarian 125 00:11:17,980 --> 00:11:22,060 weiter und wir aktualisieren set isVegetarian wie folgt. 126 00:11:25,410 --> 00:11:25,880 OK, 127 00:11:25,970 --> 00:11:31,790 das sollte es sein, wenn wir dies jetzt speichern, sollten wir einen Filterbildschirm mit unseren verschiedenen Filtern haben, den wir 128 00:11:31,790 --> 00:11:36,770 unabhängig einstellen können, weil wir unabhängige Zustände haben. Ich denke, wäre es schön, einen gewissen Abstand 129 00:11:36,770 --> 00:11:43,610 zwischen diesen Zeilen zu haben, also lassen Sie uns dies implementieren. Auf unserem Filtercontainer hier können wir einfach einen vertikalen 130 00:11:43,610 --> 00:11:50,570 Rand von 10 oder 50 hinzufügen, vielleicht ein bisschen mehr, und dies sollte sicherstellen, dass wir dort einen gewissen 131 00:11:50,570 --> 00:11:51,970 Abstand haben, ja, 132 00:11:52,130 --> 00:11:54,550 und das sieht ganz gut aus.