Ersetzen wir den Dummy-Bildschirminhalt der Kategorien hier durch ein Raster von Kategorien, denn das ist schließlich die
Idee hinter diesem Bildschirm. Jetzt können wir eine
Komponente verwenden, die wir zuvor verwendet haben, und das ist die FlatList.
Bisher haben wir verwendet, dass Sie für normale
Listen auch Raster damit rendern können, und genau das werden wir hier tun.
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.
Hier
setze ich num-Spalten, eine neue Eigenschaft, die wir vorher noch nicht gesehen haben bis 2 und dies definiert,
wie viele Spalten wir haben möchten. Der Standardwert ist 1, was eine normale Liste
ist, aber Sie können mehr als eine Spalte darin haben, und dies gibt Ihnen effektiv ein Raster.
Damit könnten wir ein Raster
rendern, aber dafür brauchen wir natürlich einige
Daten, sonst ist es schwierig, ein Raster zu rendern, oder?
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
einige Dummy-Daten sind, die ich hier zur Verfügung stelle.
Wir laden diese nicht von einem Server oder so etwas, sondern laden sie stattdessen einfach so.
Ich möchte eine Reihe von Kategorien haben und dazu füge ich noch einen Ordner hinzu, den ich Modelle nenne. Am Ende
ist dies ein Ordner, in dem ich definieren möchte, wie meine Daten in dieser App geformt sind und wie sie
aussehen .
Dort können wir also eine Kategorie hinzufügen. js-Datei zum Beispiel und in dieser Datei
möchte ich nur eine Klasse haben, die ich als Kategorie bezeichne, und Klassen sind Standard-Javascript-Funktionen in modernem Javascript,
die ich exportiere, und dort werde ich einfach definieren, wie ein Kategorieobjekt in meiner Anwendung aussehen soll wie, so dass wir im
Grunde eine einfachere Möglichkeit haben, diese Objekte zu erstellen, ohne sie falsch einzugeben und so weiter.
In dieser Kategorieklasse wird also ein Konstruktor verwendet, und Sie können diesen Konstruktor verwenden. Dies ist eine Standardmethode, die
Sie jeder
Klasse in Javascript hinzufügen können, um ein Objekt basierend auf dieser Klasse zu initialisieren.
Sie tun dies, indem Sie hier im Konstruktor einige Argumente erwarten. Für eine Kategorie möchte ich
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
verwenden werde und ich werde all
diese Daten mit Hilfe des Schlüsselworts this in Eigenschaften speichern. Falls dies für Sie völlig
neu ist, tauchen Sie auf jeden Fall zuerst in einige Javascript-Kurse oder -Ressourcen ein, da
dies nichts mit der React-Navigation oder mit
React Native zu tun hat. Dies ist Vanille-modernes Javascript.
Warum habe ich das erstellt?
Denn jetzt kann ich meine Kategorieklasse aus dem Modellordner aus der Kategorie importieren. js-Datei in die Dummy-Datendatei und verwenden Sie sie
dann, um einige Dummy-Daten zu erstellen.
Jetzt finden Sie die angehängten Dummy-Daten. Im Anhang finden Sie eine Javascript-Datei mit diesen Dummy-Kategorien, die ich in einer Konstante
speichere, die ich dann hier als benannten Export exportiere.
Dies sind einige Dummy-Kategoriedaten für die Kategorien in dieser App, in diesen Kategorien, die
ich in dieser App haben möchte. Dies sind die Kategorien, die ich in
dieser App verwenden werde, und dies sind die Kategorien, die wir jetzt in unseren Bildschirmen verwenden können, genauer gesagt im Kategorienbildschirm.
Dort möchte ich also Import- und Importkategorien aus Daten / Dummy-Daten hinzufügen, damit die benannte Konstante importiert
wird, die wir dort exportieren.
Dies ist am Ende ein Array von Javascript-Objekten, oder?
Das haben wir dort gespeichert,
es ist nur eine Reihe von Javascript-Objekten, mit denen wir jetzt unsere Liste oder genauer gesagt unser Raster
hier rendern können.
Daten für diese FlatList sind also einfach meine Kategorien-Arrays, daher zeige ich nur auf Kategorien, und natürlich benötigen
wir jetzt auch ein Renderelement, um zu definieren, wie ein einzelnes Rasterelement gerendert werden soll
und welche Komponente dort gerendert werden soll. Dazu füge ich hier eine neue
Funktion hinzu, ein Rasterelement, das am Ende hier einige Elementdaten empfängt und ein jsx-Element zurückgeben
sollte, hier eine React-Komponente zurückgeben
sollte, und ich zeige auf das Renderelement Artikel hier. Jetzt dort werde ich eine Ansicht rendern und um die Dinge einfach zu halten,
für den Moment wird dies eine Ansicht mit einem Text darin sein und in diesem Text möchte ich itemData
rendern.
item, das ist es, was wir
auf einer FlatList verfügbar haben, wenn Sie sich an frühere Module erinnern. Das Item-Datenobjekt hier hat
eine Item-Eigenschaft. React Native FlatList gibt Ihnen diese Eigenschaft und dort haben wir eine title-Eigenschaft, weil wir ein Item sind
Der Weg hierher ist nur eine Kategorie, die wir aus unseren Daten erhalten, die wir in die FlatList
einspeisen. Daher haben wir dort ein solches Javascript-Objekt als
Element, und dieses Javascript-Objekt basiert hier und da auf unserem Modell Titel, eine Farbe und eine ID-Eigenschaft,
daher haben
wir eine Titeleigenschaft, daher können wir den Titel hier so extrahieren, wir werden die Farbe später verwenden.
Das ist also
das erste, was funktionieren sollte. In neuen Versionen von React
Native müssen Sie React Native auch nicht mehr darüber informieren, dass Ihre ID nicht als Schlüssel, sondern als ID
bezeichnet wird, da neuere Versionen von React Native ID auch als ID für Listendaten akzeptieren.
Wenn Sie in einer älteren Version mitmachen würden, müssten Sie hier einen Schlüsselextraktor hinzufügen, eine Funktion, die das Element
und den Index abruft und den Wert zurückgeben muss, der als Schlüssel verwendet werden soll. In diesem Fall
also Gegenstand sein. id, wieder
neuere Versionen von React Native benötigen dies nicht, sondern nur als Referenz und für ältere Versionen
werde ich dies hier noch hinzufügen.
Jetzt geben wir unsere FlatList hier mit unseren Daten zurück.
Wenn wir das jetzt speichern, sollten wir unsere Daten
hier schon sehen, natürlich nicht wirklich so schön, aber ein
Raster, wir haben Italienisch,
daneben schnelle und einfache Hamburger, daneben Deutsch, es
sieht einfach nicht wie ein Raster aus aber technisch ist es.
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
unseren
Rasterelementen gehen, zu einem einzelnen Rasterelement und hier die Stilstütze hinzufügen und den Rasterelementstil oder wie auch immer Sie ihn benennen
möchten, und dann dort unten
werde ich hinzufügen Rasterelement zu meinem Stylesheet und geben Sie diese Eigenschaft von Flex, wir möchten so viel Platz wie
möglich nehmen, speichern Sie
dies, jetzt sieht dies schon ein bisschen mehr wie ein Raster.
Jetzt wäre auch ein gewisser Rand um jedes
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
Abstand in alle Richtungen
haben und damit natürlich nicht schlecht Wir
können jetzt auch das allgemeine Aussehen ändern und beispielsweise jedem Gegenstand eine Höhe von beispielsweise
150 geben. Es liegt ganz bei Ihnen, welche Werte Sie dort wählen, aber ich würde sagen, es
ist ein ziemlich schönes
Raster,
das sicherlich nicht gewinnt Ein Style Award, aber wir gehen in die richtige Richtung.
Bevor wir mit dem Styling fertig sind und definitiv noch etwas zu tun haben, stellen wir sicher, dass wir auf
diese Elemente tippen können, und gehen dann erneut zum Detailbildschirm für dieses bestimmte Element. Lassen Sie uns daher auch sehen, wie
wir dies tun können Setzen Sie tatsächlich einen Titel in die Kopfzeile, damit wir eine bessere Vorstellung davon
haben, wo wir uns gerade befinden.