1 00:00:02,350 --> 00:00:05,320 Damit haben wir Tabs hinzugefügt und ja, bei 2 00:00:05,330 --> 00:00:06,970 Favoriten tun wir noch 3 00:00:06,970 --> 00:00:08,370 nichts. Das werden 4 00:00:08,380 --> 00:00:14,070 wir befolgen, aber wir haben zumindest Tabs. Bevor wir an den Favoriten arbeiten, lassen Sie 5 00:00:14,070 --> 00:00:19,620 uns etwas mehr an den Registerkarten arbeiten, da wir derzeit Registerkarten für Android haben, die nicht wirklich so aussehen, 6 00:00:19,620 --> 00:00:25,080 wie wir es von Android-Registerkarten erwarten würden. Wenn Sie mich fragen, sieht dies eher wie iOS-Registerkarten aus . 7 00:00:25,080 --> 00:00:27,840 Sicher funktioniert es und Sie können das beibehalten, wenn 8 00:00:27,840 --> 00:00:33,090 dies der gewünschte Stil ist, nichts Falsches daran, aber es wäre schöner, vielleicht ein Android-spezifischeres Aussehen zu 9 00:00:33,090 --> 00:00:39,300 haben, und dafür haben wir einen separaten Navigator, den wir erstellen können, obwohl wir ihn installieren müssen ein zusätzliches Paket dafür, 10 00:00:39,390 --> 00:00:41,180 also lass uns das machen. 11 00:00:41,860 --> 00:00:45,660 Lassen Sie mich diesen Server hier beenden und npm install 12 00:00:45,660 --> 00:00:53,490 --save ausführen. Nun, das sind React-Navigation-Material-Bottom-Tabs. Übrigens gibt es auch React-Navigation-Material-Top-Tabs. Darauf werde ich nicht näher eingehen In diesem Kurs 13 00:00:53,490 --> 00:00:58,920 hier, aber im Anhang finden Sie auch einen Link, über den Sie mehr über 14 00:00:59,130 --> 00:01:04,170 diesen alternativen Navigator erfahren können. Wir werden hier den Navigator für 15 00:01:04,170 --> 00:01:09,130 die unteren Registerkarten des Materials verwenden und dieses Paket installieren. So starten wir dies. 16 00:01:09,150 --> 00:01:13,800 Warten wir also, bis die Installation abgeschlossen ist, und installieren wir anschließend 17 00:01:13,890 --> 00:01:25,240 ein weiteres Paket, das wir auch mit npm install --save und dem reaktionsnativen Papier benötigen. Lassen Sie uns dies ebenfalls installieren. Sobald diese Installation abgeschlossen ist, starten wir 18 00:01:25,240 --> 00:01:26,680 den Expo-Server 19 00:01:26,680 --> 00:01:28,720 mit npm start erneut, 20 00:01:28,810 --> 00:01:32,400 da wir jetzt Pakete installiert haben, die uns 21 00:01:32,560 --> 00:01:37,940 beim Rendern eines alternativen Tab-Navigators helfen. Er ist dankenswerterweise sehr einfach zu 22 00:01:37,970 --> 00:01:43,780 verwenden und hat fast das gleiche oder das gleiche Ähnliche Konfigurationsoptionen wie der 23 00:01:43,780 --> 00:01:48,730 Navigator auf der unteren Registerkarte, insbesondere wenn es darum geht, wie 24 00:01:48,730 --> 00:01:54,730 Symbole eingerichtet werden und so weiter. Im Anhang finden Sie alle Dokumente für 25 00:01:55,000 --> 00:01:56,160 diesen alternativen 26 00:01:56,290 --> 00:02:05,080 Navigator und für diesen weiteren alternativen Navigator, den ich erwähnt habe. Lassen Sie uns diesen verwenden, indem Sie hier aus diesem 27 00:02:05,080 --> 00:02:12,770 neu installierten Navigatorpaket für das Reaktivierungsnavigationsmaterial-Bottom-Tabs importieren. Von dort aus können wir das Create importieren Material unten Tab 28 00:02:12,830 --> 00:02:14,310 Navigator Funktion hier. 29 00:02:14,450 --> 00:02:18,950 Stellen Sie jetzt sicher, dass Sie auch Plattformimporte haben, da wir diese jetzt benötigen, da 30 00:02:18,950 --> 00:02:21,980 ich diesen Navigator nur verwenden möchte, wenn wir unter 31 00:02:21,980 --> 00:02:31,070 Android den Navigator zum Erstellen der unteren Registerkarte erstellen. Hier können wir also prüfen, ob Plattform. os ist gleich Android und in diesem Fall 32 00:02:31,070 --> 00:02:36,830 möchte ich die neue Funktion zum Erstellen von Navigatoren für untere Registerkarten verwenden, die ich gerade importiert 33 00:02:36,830 --> 00:02:37,680 habe. Andernfalls 34 00:02:37,740 --> 00:02:44,060 verwenden wir nach dem Doppelpunkt den Navigator für untere Registerkarten, den wir in der vorherigen Vorlesung eingerichtet haben. 35 00:02:44,060 --> 00:02:49,700 Das lässt uns natürlich eine Frage offen: Wie funktioniert der Navigator für die untere Registerkarte des Materials? Wie konfigurieren wir 36 00:02:49,700 --> 00:02:50,880 das? 37 00:02:50,990 --> 00:02:56,750 Und die gute Nachricht hier ist, dass es im Allgemeinen genauso funktioniert wie der Navigator auf der unteren Registerkarte. 38 00:02:56,750 --> 00:03:01,100 Es gibt einige Details, die Sie im Registerkartennavigator selbst konfigurieren 39 00:03:01,100 --> 00:03:05,670 können. So unterscheidet sich beispielsweise die Farbe, die Sie annehmen 40 00:03:05,690 --> 00:03:12,210 müssen, wann und so weiter. Dies hängt jedoch davon ab, wie Sie Ihre Registerkarten einrichten 41 00:03:12,350 --> 00:03:18,650 und Bildschirme und Symbole einrichten Sie können die gesamte Bildschirmkonfiguration hier verwenden, sie von hier 42 00:03:18,650 --> 00:03:24,350 aus ausschneiden und in einer separaten Konstante speichern, die ich hier tabScreenConfig nennen 43 00:03:24,350 --> 00:03:25,990 werde. Sie können 44 00:03:26,240 --> 00:03:33,070 sie beliebig benennen, da sie wiederverwendet werden kann, und jetzt die tabScreenConfig als erstes Argument verwenden 45 00:03:33,080 --> 00:03:40,010 Sowohl im unteren Tab-Navigator als auch im unteren Material-Tab-Navigator bleibt uns nur ein alternatives zweites Argument, das 46 00:03:40,160 --> 00:03:45,290 wir an den unteren Material-Tab-Navigator und nur an den unteren Tab-Navigator übergeben. 47 00:03:45,290 --> 00:03:51,330 Dieses zweite Argument, das wir übergeben, dieses Objekt, das wir als zweites Argument übergeben, wie Sie gelernt 48 00:03:51,330 --> 00:03:56,730 haben, ermöglicht es uns, den Registerkartennavigator selbst zu konfigurieren, z. B. Registerkartenleistenoptionen wie die aktive 49 00:03:56,990 --> 00:04:05,480 Farbtonfarbe einzurichten, die sich aufgrund des unteren Registerkartennavigators des Materials etwas unterscheiden Wir haben keine Optionen für die Registerkartenleiste eingerichtet, um unsere aktive 50 00:04:05,480 --> 00:04:07,950 Farbtonfarbe zu konfigurieren. Stattdessen haben wir hier 51 00:04:07,970 --> 00:04:14,530 in diesem Objekt selbst direkt eine aktive Farbtonfarbe. Im unteren Registerkartennavigator hatten wir diese in einem verschachtelten Objekt 52 00:04:14,570 --> 00:04:17,330 in den Optionen der Registerkartenleiste Das haben 53 00:04:17,330 --> 00:04:18,950 wir hier nicht. 54 00:04:18,950 --> 00:04:24,590 Stattdessen setzen wir hier einfach eine solche aktive Tönungsfarbe auf Akzentfarbe und es gibt auch andere 55 00:04:24,590 --> 00:04:29,660 Einstellungen. Sie können beispielsweise die Verschiebung auf wahr setzen und ich werde in einer 56 00:04:29,660 --> 00:04:30,800 Sekunde zeigen, was 57 00:04:30,890 --> 00:04:39,550 dies und was falsch macht, und damit das war es fürs Erste. Wenn wir dies jetzt speichern, wird unser Projekt neu erstellt und auf dem 58 00:04:39,550 --> 00:04:42,980 Bildschirm neu geladen. Wir haben die gleichen Registerkarten wie zuvor 59 00:04:42,980 --> 00:04:43,550 unter 60 00:04:43,550 --> 00:04:45,140 iOS, die sich nicht geändert 61 00:04:45,140 --> 00:04:48,440 haben, aber unter Android haben wir jetzt hier den Registerkarten-Navigator 62 00:04:48,500 --> 00:04:53,200 mit mehr Material, wo wir können Wechseln Sie jetzt auch so und das ist dieser 63 00:04:53,240 --> 00:04:59,270 Verschiebungseffekt, den Sie hier sehen, dass die Registerkarten wachsen, dass die Beschriftung nur auf der Registerkarte vorhanden ist, die 64 00:04:59,270 --> 00:05:00,740 aktiv ist, und wenn 65 00:05:00,860 --> 00:05:05,990 Sie die Verschiebung hier übrigens auf falsch setzen, haben Sie dies einfach nicht Effekt, dann haben 66 00:05:05,990 --> 00:05:08,390 Sie Ihre Etiketten immer auch auf Android. 67 00:05:08,390 --> 00:05:12,490 Das ist jetzt ein Look, der ein bisschen mehr wie Android 68 00:05:12,650 --> 00:05:19,990 aussieht, würde ich sagen, und es ist daher ein Look, den ich hier haben möchte, und Sie können diesen noch weiter gehen. 69 00:05:20,070 --> 00:05:23,690 Angenommen, wir möchten hier die gesamte Hintergrundfarbe der Registerkartenleiste 70 00:05:23,830 --> 00:05:25,150 ändern, je nachdem, 71 00:05:25,320 --> 00:05:30,800 welche Registerkarte ausgewählt ist, und einen schönen Welleneffekt erzielen, der dies auf dem Weg ändert. 72 00:05:31,110 --> 00:05:36,360 Dazu können wir zu unserer Bildschirmkonfiguration und dort zu den Navigationsoptionen gehen und dort haben 73 00:05:36,360 --> 00:05:37,780 wir das Registerkartensymbol. 74 00:05:37,800 --> 00:05:42,760 Wir können hier auch eine Registerkartenleistenfarbe einrichten, wenn diese Registerkarte sozusagen ausgewählt ist, und 75 00:05:42,810 --> 00:05:51,160 diese beispielsweise auf die Primärfarbe der Farben einstellen. Dies ist jetzt wichtig. Dies wirkt sich nur aus, wenn Sie die Verschiebung auf "wahr" setzen, 76 00:05:51,200 --> 00:05:58,850 andernfalls wird diese Farbleiste der Registerkartenleiste angezeigt Was ich hier einrichte, hat keine Auswirkung, da nur der Verschiebungseffekt dies unterstützt und 77 00:05:58,850 --> 00:06:05,390 was wir jetzt haben. Der Effekt, den wir jetzt haben, ist, dass wenn ich dies speichere, das gleiche 78 00:06:06,640 --> 00:06:12,810 Aussehen auf iOS erhalten wird, weil es dort eine Registerkartenleiste gibt Farbe hat keine Wirkung, aber jetzt 79 00:06:13,030 --> 00:06:17,770 sehen Sie, wir haben wirklich unsere Primärfarbe als Hintergrund, wenn Mahlzeiten ausgewählt werden, 80 00:06:17,770 --> 00:06:21,980 wenn wir Favoriten auswählen, die sich in die andere Farbe ändern. 81 00:06:22,030 --> 00:06:27,940 Jetzt sieht diese Änderung natürlich nicht mehr so schön aus, und deshalb können wir sie einfach ändern, indem wir unserem 82 00:06:27,940 --> 00:06:30,950 Favoritenbildschirm auch eine eigene Farbe in der Registerkartenleiste geben. 83 00:06:30,970 --> 00:06:36,430 In den Navigationsoptionen des Favoritenbildschirms neben dem Symbol für die Registerkartenleiste können wir also 84 00:06:36,900 --> 00:06:44,340 festlegen, dass die Farbe der Registerkartenleiste dort die Farbe betont. Jetzt haben wir eine andersfarbige Registerkartenleiste, die von unserer Primärfarbe 85 00:06:44,340 --> 00:06:51,250 für Mahlzeiten abweicht Hier zu dieser Akzentfarbe für Favoriten mit diesem schönen Welleneffekt und natürlich ist der Nachteil, 86 00:06:51,250 --> 00:06:56,910 dass wir das Symbol dann nicht sehen, weil die Akzentfarbe für die Tab-Balkenfarbe keine gute 87 00:06:56,910 --> 00:06:57,740 Wahl 88 00:06:57,750 --> 00:07:01,020 ist, wenn unsere Farbtonfarbe auch eine Akzentfarbe ist. 89 00:07:01,020 --> 00:07:06,270 Wenn wir diesen Effekt verwenden, möchten wir hier möglicherweise Weiß als Farbton verwenden, den wir immer 90 00:07:06,270 --> 00:07:13,020 sowohl gegen die Primär- als auch gegen die Akzentfarbe sehen können. Daher möchten wir hier für die aktive Farbtonfarbe möglicherweise Weiß 91 00:07:13,020 --> 00:07:18,750 anstelle unseres Akzents verwenden Farbe, weil Weiß für beide Registerkarten funktioniert, egal ob die Registerkartenleiste dann in der 92 00:07:18,750 --> 00:07:24,540 Primärfarbe, dem dunklen Lila oder in der Akzentfarbe, dem Orange und daher sehen Sie, dass wir diesen Effekt 93 00:07:24,540 --> 00:07:26,640 hier haben und diese schöne 94 00:07:26,640 --> 00:07:32,610 Welligkeit sich ändert die andere Registerkarte hier für Favoriten. Und ich denke, das ist eine ziemlich süße und 95 00:07:32,730 --> 00:07:39,120 einfach zu implementierende Änderung, die dies auf Android großartig aussehen lässt und uns sicherlich ein markanteres Android-ähnliches Aussehen verleiht, 96 00:07:39,240 --> 00:07:45,660 während das Standard-iOS-Aussehen beibehalten wird, das Sie auf dieser Plattform erwarten würden. Es ist wirklich einfach, es so zu implementieren, 97 00:07:45,660 --> 00:07:47,730 wie Sie es möchten kann sagen. 98 00:07:47,820 --> 00:07:52,700 Nun eine kurze Randnotiz: Wenn Sie diesen Verschiebungseffekt, den ich hier 99 00:07:52,710 --> 00:07:58,020 verwenden möchte, nicht verwenden möchten, ihn aber nicht verwenden möchten, werden Sie möglicherweise 100 00:07:58,020 --> 00:08:06,350 feststellen, dass die Hintergrundfarbe Ihrer Registerkarten unter Android gleich ist nicht deine Primärfarbe, sondern diese etwas hellere lila, lila-bläuliche Farbe. 101 00:08:06,360 --> 00:08:09,060 Normalerweise möchten Sie dies natürlich auch ändern, und wie 102 00:08:09,060 --> 00:08:12,060 Sie sehen, hat die Farbe der Registerkartenleiste einfach keine Auswirkung. 103 00:08:12,060 --> 00:08:14,080 Dies funktioniert nur beim Verschieben. 104 00:08:14,310 --> 00:08:21,330 Wenn Sie nun Ihre Hintergrundfarbe für die gesamte Registerkartenleiste im nicht verschiebbaren Fall ändern möchten, 105 00:08:21,330 --> 00:08:29,570 müssen Sie nur hier die Konfiguration Ihres Registerkartennavigators selbst vornehmen, da dies jetzt die gesamte Registerkartenleiste betrifft. 106 00:08:29,570 --> 00:08:30,410 Sie 107 00:08:30,410 --> 00:08:36,980 können sie einrichten eine Balkenstileigenschaft und das ist einfach ein Stilobjekt, bei dem Sie 108 00:08:36,980 --> 00:08:43,240 beispielsweise die Hintergrundfarbe auf Primärfarben setzen können, und dies ändert einfach die 109 00:08:43,240 --> 00:08:47,180 Hintergrundfarbe der Navigationsleiste für unsere untere Android-Leiste hier. 110 00:08:47,180 --> 00:08:52,750 So können Sie dies dann ändern, wenn Sie das Verschiebungsmuster hier nicht verwenden möchten, 111 00:08:52,790 --> 00:08:53,860 den Verschiebungslook. 112 00:08:54,080 --> 00:08:56,000 Ich werde das Verschieben jedoch wieder 113 00:08:56,010 --> 00:09:01,370 einschalten. Wir werden dies wieder auf "true" setzen, da mir diese andersfarbige Registerkartenleiste wirklich gefällt. Ich denke, 114 00:09:01,370 --> 00:09:07,100 das ist ein wirklich schöner Look mit diesem Welleneffekt, der die Farbe ändert, und so einfach ist es, 115 00:09:07,130 --> 00:09:08,660 andere zu implementieren Registerkartenleisten. 116 00:09:08,660 --> 00:09:13,820 Jetzt gibt es wieder eine Reihe von Konfigurationsoptionen sowohl für die Registerkartenleiste selbst als auch für die Navigationsoptionen der Bildschirme, 117 00:09:13,820 --> 00:09:18,590 die Sie in Ihrer Registerkartenleiste haben. Daher finden Sie im Anhang offizielle Dokumente, in denen Sie in jede 118 00:09:18,590 --> 00:09:22,490 einzelne Option eintauchen und sie erkunden können sie und spielen mit ihnen herum.