1 00:00:02,470 --> 00:00:09,580 Ersetzen wir den Dummy-Bildschirminhalt der Kategorien hier durch ein Raster von Kategorien, denn das ist schließlich die 2 00:00:09,580 --> 00:00:13,090 Idee hinter diesem Bildschirm. Jetzt können wir eine 3 00:00:13,090 --> 00:00:18,140 Komponente verwenden, die wir zuvor verwendet haben, und das ist die FlatList. 4 00:00:18,160 --> 00:00:20,980 Bisher haben wir verwendet, dass Sie für normale 5 00:00:20,980 --> 00:00:25,490 Listen auch Raster damit rendern können, und genau das werden wir hier tun. 6 00:00:25,730 --> 00:00:34,960 In diesem Kategorie-Bildschirm ersetze ich hier alles durch FlatList und gebe hier in diesem Bildschirm nur meine Flat-Liste aus, die ich am Ende zurückgebe. 7 00:00:34,960 --> 00:00:35,530 Hier 8 00:00:35,530 --> 00:00:42,520 setze ich num-Spalten, eine neue Eigenschaft, die wir vorher noch nicht gesehen haben bis 2 und dies definiert, 9 00:00:42,520 --> 00:00:47,950 wie viele Spalten wir haben möchten. Der Standardwert ist 1, was eine normale Liste 10 00:00:47,950 --> 00:00:53,610 ist, aber Sie können mehr als eine Spalte darin haben, und dies gibt Ihnen effektiv ein Raster. 11 00:00:53,620 --> 00:00:55,080 Damit könnten wir ein Raster 12 00:00:55,090 --> 00:00:57,070 rendern, aber dafür brauchen wir natürlich einige 13 00:00:57,070 --> 00:00:59,640 Daten, sonst ist es schwierig, ein Raster zu rendern, oder? 14 00:01:00,590 --> 00:01:06,290 Dazu füge ich einen neuen Ordner hinzu, in dem ich Daten benenne, und füge dort Dummy-Daten hinzu. js-Datei, weil es am Ende nur 15 00:01:06,290 --> 00:01:10,040 einige Dummy-Daten sind, die ich hier zur Verfügung stelle. 16 00:01:10,040 --> 00:01:16,740 Wir laden diese nicht von einem Server oder so etwas, sondern laden sie stattdessen einfach so. 17 00:01:16,920 --> 00:01:23,340 Ich möchte eine Reihe von Kategorien haben und dazu füge ich noch einen Ordner hinzu, den ich Modelle nenne. Am Ende 18 00:01:23,520 --> 00:01:29,550 ist dies ein Ordner, in dem ich definieren möchte, wie meine Daten in dieser App geformt sind und wie sie 19 00:01:29,550 --> 00:01:30,440 aussehen . 20 00:01:30,450 --> 00:01:36,810 Dort können wir also eine Kategorie hinzufügen. js-Datei zum Beispiel und in dieser Datei 21 00:01:36,840 --> 00:01:43,920 möchte ich nur eine Klasse haben, die ich als Kategorie bezeichne, und Klassen sind Standard-Javascript-Funktionen in modernem Javascript, 22 00:01:44,040 --> 00:01:52,800 die ich exportiere, und dort werde ich einfach definieren, wie ein Kategorieobjekt in meiner Anwendung aussehen soll wie, so dass wir im 23 00:01:52,920 --> 00:01:59,110 Grunde eine einfachere Möglichkeit haben, diese Objekte zu erstellen, ohne sie falsch einzugeben und so weiter. 24 00:01:59,130 --> 00:02:05,670 In dieser Kategorieklasse wird also ein Konstruktor verwendet, und Sie können diesen Konstruktor verwenden. Dies ist eine Standardmethode, die 25 00:02:05,700 --> 00:02:06,610 Sie jeder 26 00:02:06,630 --> 00:02:11,790 Klasse in Javascript hinzufügen können, um ein Objekt basierend auf dieser Klasse zu initialisieren. 27 00:02:12,000 --> 00:02:16,350 Sie tun dies, indem Sie hier im Konstruktor einige Argumente erwarten. Für eine Kategorie möchte ich 28 00:02:16,350 --> 00:02:22,200 eine ID für die Kategorie, einen Titel und eine Farbe erhalten, die ich als Hintergrundfarbe im Raster für dieses Rasterelement für diese Kategorie 29 00:02:22,200 --> 00:02:23,880 verwenden werde und ich werde all 30 00:02:24,060 --> 00:02:29,460 diese Daten mit Hilfe des Schlüsselworts this in Eigenschaften speichern. Falls dies für Sie völlig 31 00:02:29,460 --> 00:02:35,670 neu ist, tauchen Sie auf jeden Fall zuerst in einige Javascript-Kurse oder -Ressourcen ein, da 32 00:02:35,670 --> 00:02:38,550 dies nichts mit der React-Navigation oder mit 33 00:02:38,580 --> 00:02:42,470 React Native zu tun hat. Dies ist Vanille-modernes Javascript. 34 00:02:42,480 --> 00:02:44,470 Warum habe ich das erstellt? 35 00:02:44,490 --> 00:02:52,650 Denn jetzt kann ich meine Kategorieklasse aus dem Modellordner aus der Kategorie importieren. js-Datei in die Dummy-Datendatei und verwenden Sie sie 36 00:02:52,650 --> 00:02:56,460 dann, um einige Dummy-Daten zu erstellen. 37 00:02:56,460 --> 00:03:04,650 Jetzt finden Sie die angehängten Dummy-Daten. Im Anhang finden Sie eine Javascript-Datei mit diesen Dummy-Kategorien, die ich in einer Konstante 38 00:03:04,860 --> 00:03:09,070 speichere, die ich dann hier als benannten Export exportiere. 39 00:03:09,240 --> 00:03:14,200 Dies sind einige Dummy-Kategoriedaten für die Kategorien in dieser App, in diesen Kategorien, die 40 00:03:14,520 --> 00:03:19,290 ich in dieser App haben möchte. Dies sind die Kategorien, die ich in 41 00:03:19,290 --> 00:03:25,590 dieser App verwenden werde, und dies sind die Kategorien, die wir jetzt in unseren Bildschirmen verwenden können, genauer gesagt im Kategorienbildschirm. 42 00:03:26,540 --> 00:03:37,110 Dort möchte ich also Import- und Importkategorien aus Daten / Dummy-Daten hinzufügen, damit die benannte Konstante importiert 43 00:03:37,120 --> 00:03:40,640 wird, die wir dort exportieren. 44 00:03:40,660 --> 00:03:44,020 Dies ist am Ende ein Array von Javascript-Objekten, oder? 45 00:03:44,050 --> 00:03:45,610 Das haben wir dort gespeichert, 46 00:03:45,640 --> 00:03:51,850 es ist nur eine Reihe von Javascript-Objekten, mit denen wir jetzt unsere Liste oder genauer gesagt unser Raster 47 00:03:51,850 --> 00:03:53,090 hier rendern können. 48 00:03:53,170 --> 00:04:01,240 Daten für diese FlatList sind also einfach meine Kategorien-Arrays, daher zeige ich nur auf Kategorien, und natürlich benötigen 49 00:04:01,240 --> 00:04:08,510 wir jetzt auch ein Renderelement, um zu definieren, wie ein einzelnes Rasterelement gerendert werden soll 50 00:04:08,510 --> 00:04:15,380 und welche Komponente dort gerendert werden soll. Dazu füge ich hier eine neue 51 00:04:15,380 --> 00:04:22,580 Funktion hinzu, ein Rasterelement, das am Ende hier einige Elementdaten empfängt und ein jsx-Element zurückgeben 52 00:04:22,580 --> 00:04:25,460 sollte, hier eine React-Komponente zurückgeben 53 00:04:25,460 --> 00:04:33,950 sollte, und ich zeige auf das Renderelement Artikel hier. Jetzt dort werde ich eine Ansicht rendern und um die Dinge einfach zu halten, 54 00:04:33,950 --> 00:04:39,380 für den Moment wird dies eine Ansicht mit einem Text darin sein und in diesem Text möchte ich itemData 55 00:04:39,500 --> 00:04:40,160 rendern. 56 00:04:40,160 --> 00:04:42,400 item, das ist es, was wir 57 00:04:42,410 --> 00:04:48,250 auf einer FlatList verfügbar haben, wenn Sie sich an frühere Module erinnern. Das Item-Datenobjekt hier hat 58 00:04:48,250 --> 00:04:55,520 eine Item-Eigenschaft. React Native FlatList gibt Ihnen diese Eigenschaft und dort haben wir eine title-Eigenschaft, weil wir ein Item sind 59 00:04:55,520 --> 00:05:01,940 Der Weg hierher ist nur eine Kategorie, die wir aus unseren Daten erhalten, die wir in die FlatList 60 00:05:01,970 --> 00:05:05,490 einspeisen. Daher haben wir dort ein solches Javascript-Objekt als 61 00:05:05,630 --> 00:05:12,000 Element, und dieses Javascript-Objekt basiert hier und da auf unserem Modell Titel, eine Farbe und eine ID-Eigenschaft, 62 00:05:12,040 --> 00:05:12,820 daher haben 63 00:05:12,980 --> 00:05:19,160 wir eine Titeleigenschaft, daher können wir den Titel hier so extrahieren, wir werden die Farbe später verwenden. 64 00:05:20,250 --> 00:05:22,010 Das ist also 65 00:05:22,080 --> 00:05:26,850 das erste, was funktionieren sollte. In neuen Versionen von React 66 00:05:26,850 --> 00:05:35,340 Native müssen Sie React Native auch nicht mehr darüber informieren, dass Ihre ID nicht als Schlüssel, sondern als ID 67 00:05:35,400 --> 00:05:42,270 bezeichnet wird, da neuere Versionen von React Native ID auch als ID für Listendaten akzeptieren. 68 00:05:42,270 --> 00:05:48,300 Wenn Sie in einer älteren Version mitmachen würden, müssten Sie hier einen Schlüsselextraktor hinzufügen, eine Funktion, die das Element 69 00:05:48,630 --> 00:05:54,660 und den Index abruft und den Wert zurückgeben muss, der als Schlüssel verwendet werden soll. In diesem Fall 70 00:05:54,720 --> 00:05:56,980 also Gegenstand sein. id, wieder 71 00:05:57,030 --> 00:06:03,030 neuere Versionen von React Native benötigen dies nicht, sondern nur als Referenz und für ältere Versionen 72 00:06:03,030 --> 00:06:05,150 werde ich dies hier noch hinzufügen. 73 00:06:05,160 --> 00:06:08,610 Jetzt geben wir unsere FlatList hier mit unseren Daten zurück. 74 00:06:08,610 --> 00:06:11,930 Wenn wir das jetzt speichern, sollten wir unsere Daten 75 00:06:11,940 --> 00:06:15,320 hier schon sehen, natürlich nicht wirklich so schön, aber ein 76 00:06:15,330 --> 00:06:16,960 Raster, wir haben Italienisch, 77 00:06:17,040 --> 00:06:20,000 daneben schnelle und einfache Hamburger, daneben Deutsch, es 78 00:06:20,130 --> 00:06:23,690 sieht einfach nicht wie ein Raster aus aber technisch ist es. 79 00:06:24,030 --> 00:06:32,250 Damit es ein bisschen mehr wie ein Raster aussieht, müssen wir natürlich mehr Styling hinzufügen. Um dieses Styling ein wenig zu ändern, können wir hier zu 80 00:06:32,250 --> 00:06:33,080 unseren 81 00:06:33,090 --> 00:06:40,830 Rasterelementen gehen, zu einem einzelnen Rasterelement und hier die Stilstütze hinzufügen und den Rasterelementstil oder wie auch immer Sie ihn benennen 82 00:06:40,830 --> 00:06:42,620 möchten, und dann dort unten 83 00:06:43,430 --> 00:06:50,700 werde ich hinzufügen Rasterelement zu meinem Stylesheet und geben Sie diese Eigenschaft von Flex, wir möchten so viel Platz wie 84 00:06:50,700 --> 00:06:52,250 möglich nehmen, speichern Sie 85 00:06:53,390 --> 00:06:57,530 dies, jetzt sieht dies schon ein bisschen mehr wie ein Raster. 86 00:06:57,530 --> 00:07:00,640 Jetzt wäre auch ein gewisser Rand um jedes 87 00:07:00,650 --> 00:07:08,450 Element schön, also können wir einfach einen Rand hinzufügen und vielleicht 15 als Rand um jeden Artikel hinzufügen, so dass wir mehr 88 00:07:08,450 --> 00:07:10,070 Abstand in alle Richtungen 89 00:07:10,070 --> 00:07:12,500 haben und damit natürlich nicht schlecht Wir 90 00:07:12,500 --> 00:07:18,080 können jetzt auch das allgemeine Aussehen ändern und beispielsweise jedem Gegenstand eine Höhe von beispielsweise 91 00:07:18,080 --> 00:07:24,230 150 geben. Es liegt ganz bei Ihnen, welche Werte Sie dort wählen, aber ich würde sagen, es 92 00:07:24,230 --> 00:07:25,610 ist ein ziemlich schönes 93 00:07:25,610 --> 00:07:26,400 Raster, 94 00:07:26,450 --> 00:07:31,310 das sicherlich nicht gewinnt Ein Style Award, aber wir gehen in die richtige Richtung. 95 00:07:32,920 --> 00:07:38,830 Bevor wir mit dem Styling fertig sind und definitiv noch etwas zu tun haben, stellen wir sicher, dass wir auf 96 00:07:38,830 --> 00:07:44,950 diese Elemente tippen können, und gehen dann erneut zum Detailbildschirm für dieses bestimmte Element. Lassen Sie uns daher auch sehen, wie 97 00:07:45,090 --> 00:07:50,770 wir dies tun können Setzen Sie tatsächlich einen Titel in die Kopfzeile, damit wir eine bessere Vorstellung davon 98 00:07:50,770 --> 00:07:52,780 haben, wo wir uns gerade befinden.