1 00:00:02,250 --> 00:00:07,290 Nachdem wir die Grundlagen der Navigation verstanden haben und Daten weitergeben können, treten 2 00:00:07,350 --> 00:00:14,200 wir einen Schritt zurück und konzentrieren uns auf die App, die wir erstellen, die natürlich nicht so gut 3 00:00:14,190 --> 00:00:18,450 aussieht, und konzentrieren uns hier auf diese Kategorieelemente im Raster. 4 00:00:18,450 --> 00:00:21,210 Wir können sie antippen, aber dies 5 00:00:21,210 --> 00:00:27,200 ist offensichtlich keine App, die Sie verwenden möchten. Um dies jetzt im Kategorienbildschirm benutzerfreundlicher zu machen, 6 00:00:27,240 --> 00:00:30,400 greife ich hier tatsächlich zu diesem Element, dieser berührbaren 7 00:00:30,490 --> 00:00:36,030 Deckkraft, also zu diesem Rasterelement, und lagere es in eine separate Komponente aus, nicht etwas, das 8 00:00:36,030 --> 00:00:43,210 Sie tun müssen, sondern etwas, das Sie möglicherweise in Betracht ziehen möchten Einfach, um Ihre Komponenten schlanker und sauberer zu halten. 9 00:00:43,260 --> 00:00:49,890 Dafür füge ich im Komponentenordner eine CategoryGridTile hinzu. js Datei, der Name liegt natürlich 10 00:00:49,890 --> 00:00:56,400 ganz bei Ihnen und dort müssen wir React von React importieren, wir werden sicherlich auch 11 00:00:56,400 --> 00:01:03,990 einige Sachen von React Native benötigen, um dort eine Komponente zu erstellen, nämlich wir brauchen berührbare Deckkraft 12 00:01:04,020 --> 00:01:11,550 von Natürlich brauchen wir die Ansicht, wir brauchen Text und wir brauchen ein Stylesheet, damit wir dies 13 00:01:11,550 --> 00:01:14,900 auch hier stylen können, und jetzt können 14 00:01:14,940 --> 00:01:22,980 wir hier die Kategorie-Gitter-Kachel-Komponente erstellen, die einige Requisiten erhält. Wir benötigen hier ein Stylesheet, das 15 00:01:22,980 --> 00:01:31,110 ich in der Styles-Konstante speichere. Natürlich können wir danach wie immer die 16 00:01:31,110 --> 00:01:39,810 Komponente exportieren und innerhalb dieser Komponentenfunktion den jsx-Code zurückgeben, den ich gerade aus dem 17 00:01:39,810 --> 00:01:46,810 Kategorienbildschirm hier ausgeschnitten habe . Hier ist also die berührbare Deckkraft eingerichtet, dieses Rasterelement ist eingerichtet, aber 18 00:01:46,810 --> 00:01:52,560 wir müssen ein paar Dinge ändern. Im Kategorienbildschirm richte ich hier beispielsweise den Rasterelementstil ein. Jetzt könnten wir es hier 19 00:01:52,560 --> 00:01:58,530 lassen und es irgendwie in unsere Gitterkachel einfügen und dann dort zusammenführen, wie Sie es gelernt haben, aber 20 00:01:58,530 --> 00:02:03,510 ich werde einfach das gesamte Styling in der Komponente selbst einrichten, da wir nur 21 00:02:03,540 --> 00:02:09,810 die Kategorie-Gitterkachel in der verwenden Raster auf dem Kategorienbildschirm. Also werde ich den Rasterelementstil hier zum Stylesheet in 22 00:02:09,870 --> 00:02:10,830 dieser Datei 23 00:02:10,860 --> 00:02:17,280 hinzufügen, daher funktioniert dies wieder. Der onPress-Handler funktioniert noch nicht. Wir werden dies bald beheben und jetzt können 24 00:02:17,280 --> 00:02:24,720 wir zum Kategorienbildschirm zurückkehren und natürlich Importieren Sie unsere Komponente. Importieren Sie also die Kategorie-Raster-Kachelkomponente dort aus 25 00:02:24,750 --> 00:02:28,250 dem Komponentenordner und dort die 26 00:02:28,290 --> 00:02:37,080 Kategorieraster-Kachel und geben Sie diese jetzt einfach hier zurück, wenn wir ein neues Element rendern. 27 00:02:37,080 --> 00:02:38,990 Natürlich funktioniert es so 28 00:02:39,000 --> 00:02:45,300 nicht, wir müssen einige Daten in die Rasterkachel weiterleiten, damit sie dort korrekt funktionieren, und wir 29 00:02:45,300 --> 00:02:53,880 müssen auch sicherstellen, dass das Drücken dieser Taste uns navigiert. Jetzt gebe ich die Daten ein, die wir dort benötigen, nämlich 30 00:02:53,880 --> 00:03:01,140 den Titel. Das ist also itemData. Artikel. Titel und das ist jetzt eine 31 00:03:01,140 --> 00:03:08,910 Requisite, die wir in der Kategorie Gitterkachel verwenden können, und ich möchte auch eine andere Requisite übergeben, die eine Funktion übergibt, 32 00:03:08,940 --> 00:03:18,240 die wir dann ausführen können, um zu navigieren, und ich werde dies bei Auswahl benennen, aber Sie können dies benennen, was Sie wollen und dort möchte 33 00:03:18,240 --> 00:03:26,700 ich nur den Code ausführen, den ich derzeit in onPress ausführe. Also schneide ich dies von hier aus aus der 34 00:03:26,700 --> 00:03:33,000 Kategorie-Raster-Kachel heraus, verschiebe es zurück in den Kategorien-Bildschirm, in diese Funktion, die ich an onSelect 35 00:03:33,000 --> 00:03:38,700 übergebe, und jetzt müssen wir nur noch onSelect aus der Kategorie-Raster-Kachel heraus auslösen, 36 00:03:38,730 --> 00:03:48,110 das ist natürlich Ein normales Muster, das Sie von React kennen. Zurück in der Kategorie-Raster-Kachel kann onPress einfach auf Requisiten onSelect zeigen, um 37 00:03:48,320 --> 00:03:52,390 die Funktion auszulösen, die in der onSelect-Requisite übergeben wurde. 38 00:03:52,550 --> 00:03:57,370 Jetzt kann der Titel, den ich hier ausgebe, auch nur Requisiten sein. Titel, weil wir diese 39 00:03:57,380 --> 00:04:03,380 Titel-Requisite als Requisite auf unserer Kategorie-Raster-Kachel erhalten, geben wir sie hier weiter. 40 00:04:05,100 --> 00:04:11,460 Damit haben wir unsere Komponente ein wenig aufgeteilt, aber jetzt möchte ich natürlich auch 41 00:04:11,460 --> 00:04:17,130 ein bisschen mehr am Styling arbeiten. Zurück in der Kategorie-Raster-Kachel möchte ich zum Beispiel 42 00:04:17,130 --> 00:04:21,580 die Farbe verwenden, die ich einrichte, da jede Kategorie eine Farbe erhält, die in dieser 43 00:04:21,660 --> 00:04:28,620 Farbeigenschaft hier gespeichert ist. Es wäre also schön, diese zu verwenden. Daher können wir auch die Kategorie-Gitterkachel weiterleiten. Hier können Sie die Farbe weiterleiten. 44 00:04:28,620 --> 00:04:34,070 Sie können diese Requisite natürlich benennen, wie Sie möchten. Farbeigenschaft und 45 00:04:34,200 --> 00:04:40,950 hier muss es sein. Farbe, da wir die Eigenschaftsfarbe hier im Modell und jetzt in einer 46 00:04:40,950 --> 00:04:44,360 Kategorie-Raster-Kachel benannt haben, können wir diese Farbe verwenden, um diese hier zu formatieren. 47 00:04:44,460 --> 00:04:50,760 Wie kann man das dann stylen, wie soll das aussehen? Durch Hinzufügen eines Stils zur Ansicht innerhalb 48 00:04:50,760 --> 00:04:56,460 der berührbaren Deckkraft, da die berührbare Deckkraftkomponente selbst unsichtbar ist, die Ansicht jedoch nicht 49 00:04:56,460 --> 00:05:01,250 vorhanden ist, können wir ein Objekt übergeben und die Hintergrundfarbe hier 50 00:05:01,260 --> 00:05:04,620 auf Requisiten setzen. Farbe. 51 00:05:04,740 --> 00:05:08,860 Mal sehen, wie das aussieht. Wenn wir das speichern und darauf warten, dass es neu geladen 52 00:05:08,950 --> 00:05:11,080 wird, sieht es nicht schlecht aus, aber 53 00:05:11,110 --> 00:05:15,970 es ist zu klein. Es sollte das gesamte Rasterelement ausfüllen und nicht nur die Zeile mit dem Text darin. 54 00:05:16,180 --> 00:05:25,210 Um dies zu verbessern, werde ich diesen Inline-Stil hier haben, aber ich werde ihn zu einem umgebenden Objekt mit einer anderen 55 00:05:25,210 --> 00:05:33,770 Stilkonfiguration zusammenführen, die ich im Stylesheet eingerichtet habe, und ich werde diesen Container benennen. Sie können ihn beliebig benennen wollen, 56 00:05:33,790 --> 00:05:35,610 Stile Container, ziehen 57 00:05:35,680 --> 00:05:39,270 Sie dort auch alle Schlüssel-Wert-Paare heraus, damit wir 58 00:05:39,620 --> 00:05:47,450 diese Stile hier und jetzt zusammenführen. Container ist ein Stylesheet-Objekt, das wir dort unten hinzufügen können, und hier 59 00:05:47,540 --> 00:05:54,530 können wir Flex eins festlegen, um dies sicherzustellen Jeder Gegenstand füllt den gesamten Raum aus, den 60 00:05:54,530 --> 00:05:58,880 er bekommt, und jetzt sieht das viel besser aus. 61 00:05:59,030 --> 00:06:02,330 Jetzt bin ich immer noch nicht 62 00:06:03,080 --> 00:06:10,080 100% glücklich, ich möchte hier einen kleinen Randradius hinzufügen, sagen wir 10, um einige abgerundete Ecken 63 00:06:10,400 --> 00:06:14,310 zu haben, und natürlich können Sie hier jedes gewünschte 64 00:06:14,570 --> 00:06:28,320 Styling einrichten, ich bevorzuge richtet auch eine Schattenfarbe von Schwarz und eine Schattenopazität von ein. 26 und ein Schattenversatz von Breite 0, Höhe 2 und ein Schattenradius von 10 und 65 00:06:28,380 --> 00:06:37,010 eine Höhe von 3, Höhe für Android, wenn Sie sich erinnern, da diese Schatteneigenschaften nur iOS betreffen, so dass 66 00:06:37,020 --> 00:06:42,720 wir ein wenig von dieser dreidimensionalen Karte erhalten Schauen Sie und 67 00:06:42,810 --> 00:06:48,680 natürlich, wie ich bereits erwähnte, können Sie dies so gestalten, wie Sie möchten. 68 00:06:48,690 --> 00:06:54,240 Außerdem möchte ich jetzt sicherstellen, dass dieser Text hier in der unteren rechten Ecke steht 69 00:06:54,240 --> 00:06:55,380 und natürlich 70 00:06:55,380 --> 00:07:00,960 ein wenig aufgefüllt ist, ein wenig Abstand. Also füge ich hier ein wenig Polsterung hinzu, sagen 71 00:07:01,140 --> 00:07:08,730 wir mal 10, und setze jetzt "Rechtfertigungsinhalt" auf "Flex-Ende". Die Flex-Richtung im Container ist natürlich von oben nach unten, da es sich um eine Spalte 72 00:07:08,730 --> 00:07:14,340 handelt Unten hier und jetzt, um es auch auf der horizontalen Achse nach rechts zu verschieben, habe ich 73 00:07:14,340 --> 00:07:17,100 die Ausrichtungselemente so eingestellt, dass sie auch das 74 00:07:17,220 --> 00:07:22,770 Ende biegen, und dies verschiebt das zum Ende der Querachse, das in einer normalen Ansicht von links nach 75 00:07:22,800 --> 00:07:29,900 rechts ist, wo Sie es nicht getan haben Ändern Sie die Flexrichtung. Damit erhalten wir diesen Look, von dem ich sagen 76 00:07:29,930 --> 00:07:36,230 würde, dass er besser ist, aber natürlich könnte sich auch der Text hier, das Textstyling ändern und ein bisschen 77 00:07:36,230 --> 00:07:37,430 mehr Polsterung könnte 78 00:07:37,430 --> 00:07:43,100 gut aussehen, vielleicht 15, aber natürlich können wir damit experimentieren und auch Eine wichtige Randnotiz: In dieser 79 00:07:43,100 --> 00:07:47,330 App werde ich mich nicht darauf konzentrieren, hier ein vollständig ansprechendes Erlebnis 80 00:07:47,330 --> 00:07:53,450 zu schaffen. Ich werde versuchen, dies kurz und prägnant zu halten, da der Schwerpunkt dieses Moduls natürlich auf 81 00:07:53,690 --> 00:07:58,720 der Navigation liegt. Daher werde ich dies nicht optimieren für alle möglichen Bildschirme und Plattformen. 82 00:07:58,720 --> 00:08:01,200 Dies ist etwas, was Sie natürlich als Übung tun 83 00:08:01,250 --> 00:08:06,860 können. Ich werde mich nicht daran halten, dieses Modul nicht unnötig aufzublähen, also werde ich einfach ein Styling einrichten, das 84 00:08:06,860 --> 00:08:08,450 auf diesen Emulatoren gut aussieht. 85 00:08:08,450 --> 00:08:14,520 Davon abgesehen könnte ein bisschen mehr Polsterung sinnvoll sein, und ich möchte den Titel auch 86 00:08:14,720 --> 00:08:17,740 hier stylen. Daher füge ich hier beispielsweise 87 00:08:17,810 --> 00:08:19,330 den Titelstil hinzu, 88 00:08:19,430 --> 00:08:22,040 der im Stylesheet eingerichtet ist, und 89 00:08:22,040 --> 00:08:28,670 füge ihn hier und da hinzu, den ich verwenden möchte meine Schriftfamilie, offen ohne Fettdruck, die 90 00:08:28,670 --> 00:08:39,110 ich natürlich verwenden kann, weil ich sie hier in der App registriere. js, also wird hier offen ohne Fett hinzugefügt und vielleicht auch die Schriftgröße ein 91 00:08:39,110 --> 00:08:42,870 wenig auf 22 geändert. Wir speichern das, 92 00:08:42,880 --> 00:08:45,340 das sieht ganz anständig aus. 93 00:08:45,470 --> 00:08:48,560 Jetzt gibt es noch eine letzte Sache, 94 00:08:49,750 --> 00:08:58,330 die ich auf meiner Kategorie-Raster-Kachel tun möchte. Im Text hier setze ich die Anzahl der Zeilen auf 2, damit jeder Text, der länger als 95 00:08:58,330 --> 00:09:07,800 dieser ist, tatsächlich abgeschnitten wird, was meiner Meinung nach aussieht ein bisschen schöner. Und zu guter Letzt werden Sie vielleicht bemerken, dass 96 00:09:07,870 --> 00:09:14,560 dies auf Android für leicht und schön hier links ist, weil es in zwei 97 00:09:14,560 --> 00:09:19,670 Zeilen unterteilt ist, um sicherzustellen, dass dies auch rechts ist, auf 98 00:09:19,720 --> 00:09:27,900 den Titel hier werde ich setzen Text nach rechts ausrichten, um zu erzwingen, dass dies rechts ist. 99 00:09:28,000 --> 00:09:30,420 Warten wir also, bis das neu geladen ist, 100 00:09:33,070 --> 00:09:35,720 und jetzt sieht es so aus, wie es sollte. 101 00:09:35,720 --> 00:09:38,020 Nun, das ist hier nicht schlecht. 102 00:09:38,060 --> 00:09:43,850 Jetzt werden Sie vielleicht bemerken, dass der Effekt etwas seltsam aussieht, wenn ich hier auf ein Element tippe. 103 00:09:43,850 --> 00:09:46,520 Wir bekommen diesen seltsamen zusätzlichen Rand darum herum. 104 00:09:46,550 --> 00:09:53,750 Jetzt werde ich hier noch etwas tun, das völlig optional ist, aber ich werde es hier hinzufügen, ich werde die 105 00:09:53,750 --> 00:10:00,710 Plattform-API hinzufügen und auch berührbares natives Feedback hinzufügen, um den Ripple-Effekt anstelle der berührbaren Deckkraft tatsächlich zu verwenden, wenn 106 00:10:00,710 --> 00:10:02,090 dies unterstützt wird. 107 00:10:02,090 --> 00:10:11,600 Also hier habe ich meine berührbare Komponente, die standardmäßig berührbare 108 00:10:11,790 --> 00:10:21,510 Deckkraft ist, aber wenn Plattform. os ist gleich Android und wie Sie zuvor im Kurs erfahren haben, ist die 109 00:10:21,510 --> 00:10:26,340 Version größer oder gleich 21, dann wissen wir, dass berührbares natives Feedback unterstützt 110 00:10:26,340 --> 00:10:31,100 wird, also setze ich berührbare Komponente gleich berührbarem nativem Feedback, wie folgt. 111 00:10:31,290 --> 00:10:35,820 Verwenden Sie hier eine berührbare Komponente anstelle einer berührbaren Deckkraft. 112 00:10:35,820 --> 00:10:38,730 Damit sollten wir einen schönen Welleneffekt 113 00:10:38,730 --> 00:10:41,000 auf Android haben. Auf 114 00:10:41,130 --> 00:10:46,070 iOS haben wir den gewünschten Deckkrafteffekt und auf Android haben wir 115 00:10:46,080 --> 00:10:50,520 jetzt einen Welleneffekt, aber das Styling ist jetzt deaktiviert. 116 00:10:50,550 --> 00:10:57,830 Dies können wir jedoch beheben, indem wir eine zusätzliche Ansicht hinzufügen, die unseren Rasterelementstil anstelle 117 00:10:57,840 --> 00:11:01,840 der berührbaren Komponente hier erhält. Damit müssen 118 00:11:02,010 --> 00:11:08,700 wir der berührbaren Komponente nur eine zusätzliche Stileigenschaft hinzufügen und eine flexible festlegen. 119 00:11:08,730 --> 00:11:10,430 Ich mache es mit einem Inline-Stil 120 00:11:10,440 --> 00:11:16,770 hier schnell und schmutzig, Sie könnten einen separaten Stil in das Stylesheet einfügen. Damit sieht es auf iOS und jetzt auch auf Android 121 00:11:16,800 --> 00:11:17,800 gleich aus 122 00:11:17,910 --> 00:11:21,370 und fühlt sich auch so an. Der Welleneffekt ist da. 123 00:11:21,370 --> 00:11:27,870 Jetzt werden jedoch nicht unsere abgerundeten Ecken verwendet, sondern ein Quadrat oder ein Rechteck gerendert, und Sie haben auch früher gelernt, wie 124 00:11:28,080 --> 00:11:31,100 Sie dies beheben können. Um dies zu 125 00:11:31,110 --> 00:11:35,820 beheben, müssen wir nur das Rasterelement bearbeiten, den Randradius von 10 hinzufügen 126 00:11:35,910 --> 00:11:42,930 und dann den Überlauf verbergen, um sicherzustellen, dass untergeordnete Elemente nicht außerhalb dieser Umbruchansicht gerendert werden können, was 127 00:11:42,930 --> 00:11:43,950 bedeutet, dass 128 00:11:43,950 --> 00:11:49,010 die Welligkeit auftritt Der Effekt kann nicht außerhalb dieser abgerundeten Box liegen. 129 00:11:49,020 --> 00:11:54,540 Jetzt haben wir diesen Look und das ist die einzige Anpassung, die ich hier für verschiedene Plattformen vornehmen 130 00:11:54,540 --> 00:11:58,050 möchte, und damit sieht das nicht schlecht aus, würde ich sagen. 131 00:11:58,050 --> 00:12:04,110 Jetzt können Sie natürlich das Aussehen anpassen, die Schriftgröße anpassen und so weiter, damit das auf Ihren 132 00:12:04,110 --> 00:12:07,080 Geräten, die Sie testen, wirklich gut aussieht. 133 00:12:07,080 --> 00:12:11,940 Ich bin mit diesem Look zufrieden und jetzt ist es wirklich an der Zeit, auch einige Rezepte zu rendern, wenn 134 00:12:11,970 --> 00:12:13,470 wir hier eine Kategorie auswählen.