1 00:00:02,280 --> 00:00:05,200 Beginnen wir mit dem Styling der Schublade auf dem 2 00:00:05,220 --> 00:00:06,560 Filterbildschirm. Das ist nicht 3 00:00:06,570 --> 00:00:11,080 schwierig, das haben wir schon früher gemacht. Im Filternavigator hier im 4 00:00:11,100 --> 00:00:16,500 Stapelnavigator müssen wir am Ende nur die Standardnavigationsoptionen einrichten, die wir 5 00:00:16,500 --> 00:00:24,090 auch für den Lieblingsnavigator in unserem Essensnavigator verwenden. Wir können also einfach dieses zweite Konfigurationsobjekt hier kopieren 6 00:00:24,090 --> 00:00:29,270 und es hier als zweites Argument zum Erstellen des Stack-Navigators in unseren Filter-Navigator einfügen. 7 00:00:29,350 --> 00:00:31,870 Natürlich können wir diese auskommentierte 8 00:00:31,870 --> 00:00:39,220 Zeile entfernen, aber mit dieser einfachen Änderung stellen wir sicher, dass wir hier denselben Navigationsleisten- oder 9 00:00:39,220 --> 00:00:40,450 Aktionsleistenstil verwenden. 10 00:00:40,450 --> 00:00:45,580 Das ist also eine einfache, aber nützliche Änderung. Was ist nun mit dem 11 00:00:45,580 --> 00:00:48,770 Aussehen hier und dem Stil der Schublade? 12 00:00:48,780 --> 00:00:55,690 Zum einen können Sie, wenn Sie die gesamte Schublade steuern und die Anordnung der Elemente dort ändern möchten, nicht diese Standardeinstellung verwenden, 13 00:00:55,990 --> 00:01:01,120 eine Liste mit Welleneffekt hier auf Android und einen anderen Effekt auf iOS zu haben, aber 14 00:01:01,120 --> 00:01:01,910 ich denke, 15 00:01:02,050 --> 00:01:05,680 das ist eine nette Standardeinstellung was ich eigentlich nicht ändern will. 16 00:01:05,710 --> 00:01:10,930 Wenn Sie möchten, können Sie jedoch die gesamte Komponente ersetzen, die hier gerendert und angehängt ist. Sie finden 17 00:01:10,930 --> 00:01:15,850 einen Link zu den offiziellen Dokumenten, in denen Sie mehr darüber erfahren können, falls Sie dies 18 00:01:15,850 --> 00:01:16,510 anpassen müssen. 19 00:01:16,780 --> 00:01:25,050 Was ich natürlich ändern möchte, ist der Stil dieser Elemente und der Text, der hier angezeigt wird. 20 00:01:25,060 --> 00:01:26,550 Nun, das ist 21 00:01:26,590 --> 00:01:32,500 nicht allzu schwierig. Beginnen wir mit dem Text. Wie Sie sehen können, werden als Text standardmäßig diese Bezeichner 22 00:01:32,530 --> 00:01:34,550 hier verwendet, die Lieblingsfilter für Mahlzeiten. 23 00:01:34,570 --> 00:01:39,020 Jetzt kann es das natürlich, aber die Favoriten der Mahlzeiten, das ist nicht 24 00:01:39,040 --> 00:01:42,250 wirklich ein Text, den wir unseren Benutzern zeigen möchten. 25 00:01:42,250 --> 00:01:47,540 Daher möchte ich dies überschreiben und wir können dies mit den guten alten Navigationsoptionen 26 00:01:47,560 --> 00:01:53,920 tun, die wir wie zuvor mit den Registerkarten, auf denen wir auch den Beschriftungstext steuern können, auf 27 00:01:54,160 --> 00:02:00,460 unseren Stapelnavigatoren festlegen müssen, entweder beim Erstellen der Stack-Navigator: Neben der Einstellung der Standardnavigationsoptionen für jeden Bildschirm 28 00:02:00,460 --> 00:02:05,690 in diesem Navigator können wir Navigationsoptionen für den gesamten Navigator selbst festlegen. Dies gilt 29 00:02:05,700 --> 00:02:10,510 dann nicht für die Bildschirme im Navigator, sondern für den Navigator, wenn er 30 00:02:10,510 --> 00:02:11,500 als Bildschirm 31 00:02:11,740 --> 00:02:19,570 verwendet wird Hier und da könnten wir ein Schubladenetikett setzen und dies auf Filter mit ein paar Ausrufezeichen setzen, nur damit 32 00:02:19,570 --> 00:02:22,100 wir sehen, dass dies einen Effekt hat. 33 00:02:22,150 --> 00:02:23,720 Jetzt sehen wir das 34 00:02:23,770 --> 00:02:27,220 hier, also können wir dies hier einstellen. eine Option. 35 00:02:27,220 --> 00:02:32,800 Alternativ können wir hier beim Erstellen des Schubladen-Navigators das längere Formular verwenden, in dem wir 36 00:02:32,800 --> 00:02:38,260 einen Bildschirm einrichten und dann hier Navigationsoptionen einrichten. Dies sind einfach nur Alternativen, bei 37 00:02:38,590 --> 00:02:40,230 denen keines der beiden 38 00:02:40,240 --> 00:02:41,830 besser oder schlechter 39 00:02:41,980 --> 00:02:47,840 ist. Sie können eines von beiden verwenden sie und jetzt hier werde ich Schubladenetikett auf 40 00:02:47,840 --> 00:02:52,760 Mahlzeiten setzen, sagen wir, das macht für mich mehr Sinn als Mahlzeiten Favoriten. 41 00:02:53,600 --> 00:02:58,670 Wenn ich jetzt die Schublade öffne, sehe ich Mahlzeiten und Filter. Bei Filtern habe ich den Titel jetzt 42 00:02:58,670 --> 00:03:02,100 nicht überschrieben, da ich meine Kennung standardmäßig verwenden kann, bei 43 00:03:02,240 --> 00:03:04,580 Mahlzeiten habe ich sie jedoch überschrieben. 44 00:03:04,580 --> 00:03:08,420 Was ist nun mit dem Styling, der Farbe und so weiter? 45 00:03:08,420 --> 00:03:15,020 Nun, das kann natürlich auch kontrolliert werden. Nun, genau wie zuvor mit beispielsweise den Registerkarten, bei denen wir 46 00:03:15,020 --> 00:03:21,260 auch ein zweites Argument übergeben könnten, um einen unteren Registerkartennavigator zu erstellen, um das Layout und das Design der Registerkarten 47 00:03:21,260 --> 00:03:22,130 im Allgemeinen 48 00:03:22,130 --> 00:03:28,190 zu steuern, können wir dasselbe für die Schublade tun. Um einen Schubladen-Navigator zu erstellen, können wir ein zweites Argument übergeben, bei 49 00:03:28,220 --> 00:03:31,320 dem es sich um ein Objekt handelt, das für den Schubladen-Navigator selbst konfiguriert 50 00:03:31,550 --> 00:03:33,290 ist. Dort erhalten wir einige Optionen. 51 00:03:33,320 --> 00:03:37,880 Wiederum erhalten Sie in offiziellen Dokumenten eine vollständige Liste aller Konfigurationsmöglichkeiten. Sie haben beispielsweise 52 00:03:37,880 --> 00:03:42,980 Ihre Inhaltsoptionen, mit denen Sie den Inhalt in der Schublade steuern können, sodass Sie mit den Schubladenelementen 53 00:03:42,980 --> 00:03:47,730 bis zum Ende eine Reihe von Inhalten haben Einstellungen, die Sie einrichten können, z. B. 54 00:03:47,930 --> 00:03:53,960 können Sie eine aktive Farbtonfarbe festlegen, die im Wesentlichen zum Färben eines Elements dient, wenn es aktiv ist, und dort 55 00:03:54,090 --> 00:03:59,870 können wir Farben festlegen, Akzentfarbe, wenn wir möchten, anstatt diese blaue Standardeinstellung und zu verwenden Daher ist dies jetzt 56 00:03:59,870 --> 00:04:00,320 orange 57 00:04:00,320 --> 00:04:05,170 und so einfach ist es, dies zu ändern. Dies ist alles, was wir tun müssen. 58 00:04:05,330 --> 00:04:08,980 Wenn wir nun auch die dort verwendete Schriftart 59 00:04:09,080 --> 00:04:15,710 ändern möchten, können wir dies auch tun. Neben dem Festlegen einer aktiven Farbtonfarbe hier in den Inhaltsoptionen 60 00:04:15,710 --> 00:04:17,120 können wir hier 61 00:04:17,120 --> 00:04:22,010 einen Beschriftungsstil einrichten, der ein Stilobjekt verwendet, das auf die zugrunde liegende Textkomponente in der Schublade 62 00:04:22,010 --> 00:04:24,810 angewendet wird, sodass wir dort beispielsweise die Ausrichtung von 63 00:04:24,950 --> 00:04:32,870 Text einrichten können, wenn Wir möchten oder in meinem Fall hier einfach die Schriftfamilie einrichten und dies so einstellen, dass Sans geöffnet wird, vielleicht so, 64 00:04:32,870 --> 00:04:36,550 nicht einmal die fett gedruckte Version. Wenn wir das tun, sehen wir deutlich einen Unterschied. 65 00:04:36,550 --> 00:04:40,790 Jetzt werde ich es wieder auf Fett setzen, weil das schöner ist, aber um einen Unterschied zu sehen, 66 00:04:40,880 --> 00:04:42,890 denke ich, dass es ohne Fett klar war. 67 00:04:42,920 --> 00:04:44,950 Jetzt verwenden wir hier unsere 68 00:04:44,960 --> 00:04:47,570 eigene Schriftart, die fette Version und unsere 69 00:04:47,570 --> 00:04:48,530 eigene Farbe, 70 00:04:48,530 --> 00:04:54,130 und das ist ziemlich ordentlich, würde ich sagen, das gleiche funktioniert natürlich auch auf Android. 71 00:04:54,170 --> 00:04:58,460 Auf diese Weise können Sie mit Ihrer Schublade 72 00:04:58,460 --> 00:05:01,700 arbeiten, alles dort stylen und damit 73 00:05:01,940 --> 00:05:07,850 die wichtigsten Navigationsmuster kennenlernen, die Sie mithilfe der React-Navigation zu Ihrer App 74 00:05:07,850 --> 00:05:09,270 hinzufügen können. 75 00:05:09,290 --> 00:05:15,770 Nun, da ich in diesem Modul mehrmals betont habe, gibt es natürlich viel zu konfigurieren. Alle diese Navigatoren haben unterschiedliche 76 00:05:15,770 --> 00:05:20,990 Navigationsoptionen und -einstellungen für die Navigatoren selbst. Schauen Sie sich daher auf jeden Fall die offiziellen 77 00:05:20,990 --> 00:05:26,060 Dokumente an und spielen Sie einfach mit den verschiedenen Einstellungen, die Sie dort sehen Experimentieren 78 00:05:26,060 --> 00:05:31,820 Sie mit dem, was Sie tun können. Die Dinge, die ich hier gezeigt habe und die Dinge, die wir hier geändert haben, 79 00:05:31,820 --> 00:05:35,000 sind wahrscheinlich die häufigsten Dinge, die Sie anpassen möchten. Deshalb habe ich sie hier gezeigt, aber 80 00:05:35,090 --> 00:05:36,580 es gibt wieder so viel zu 81 00:05:36,590 --> 00:05:40,950 tun. Schauen Sie sich auf jeden Fall die offiziellen Dokumente an. Für diese App ist der 82 00:05:40,970 --> 00:05:43,960 Navigationsteil im Grunde genommen erledigt, es gibt nicht zu 83 00:05:43,970 --> 00:05:46,410 viel hinzuzufügen. Jetzt ist es Zeit, 84 00:05:46,430 --> 00:05:50,360 das allgemeine Styling zu überdenken. Stellen Sie beispielsweise sicher, dass wir 85 00:05:50,360 --> 00:05:56,600 überall die richtigen Schriftarten verwenden, auch in den Registerkarten und in der Kopfzeile und für Beispiel auch für 86 00:05:56,660 --> 00:06:00,590 den Text hier, den wir momentan nicht haben und dann auch 87 00:06:00,590 --> 00:06:06,050 den Rest der App mit etwas Fleisch füllen. Zum Beispiel die Detailseite hier, die 88 00:06:06,050 --> 00:06:11,810 momentan noch Dummy-Inhalte enthält, und auch unsere Filterseite, die ebenfalls nur Dummy-Inhalte enthält. 89 00:06:11,810 --> 00:06:14,290 Das werde ich im Rest dieses Moduls 90 00:06:14,330 --> 00:06:20,330 tun. Danach stellen wir im nächsten Modul sicher, dass wir mehr Logik hinzufügen und dass wir beispielsweise etwas 91 00:06:20,330 --> 00:06:25,700 als Favorit markieren und es dann zu den Favoriten hinzufügen können Registerkarte, die derzeit nicht funktioniert. 92 00:06:25,910 --> 00:06:30,470 Aber jetzt beenden wir das Styling und fügen den Rest des Layouts und des Inhalts zu dieser App hinzu.