Nachdem wir die Grundlagen der Navigation verstanden haben und Daten weitergeben können, treten
wir einen Schritt zurück und konzentrieren uns auf die App, die wir erstellen, die natürlich nicht so gut
aussieht, und konzentrieren uns hier auf diese Kategorieelemente im Raster.
Wir können sie antippen, aber dies
ist offensichtlich keine App, die Sie verwenden möchten. Um dies jetzt im Kategorienbildschirm benutzerfreundlicher zu machen,
greife ich hier tatsächlich zu diesem Element, dieser berührbaren
Deckkraft, also zu diesem Rasterelement, und lagere es in eine separate Komponente aus, nicht etwas, das
Sie tun müssen, sondern etwas, das Sie möglicherweise in Betracht ziehen möchten Einfach, um Ihre Komponenten schlanker und sauberer zu halten.
Dafür füge ich im Komponentenordner eine CategoryGridTile hinzu. js Datei, der Name liegt natürlich
ganz bei Ihnen und dort müssen wir React von React importieren, wir werden sicherlich auch
einige Sachen von React Native benötigen, um dort eine Komponente zu erstellen, nämlich wir brauchen berührbare Deckkraft
von Natürlich brauchen wir die Ansicht, wir brauchen Text und wir brauchen ein Stylesheet, damit wir dies
auch hier stylen können, und jetzt können
wir hier die Kategorie-Gitter-Kachel-Komponente erstellen, die einige Requisiten erhält. Wir benötigen hier ein Stylesheet, das
ich in der Styles-Konstante speichere. Natürlich können wir danach wie immer die
Komponente exportieren und innerhalb dieser Komponentenfunktion den jsx-Code zurückgeben, den ich gerade aus dem
Kategorienbildschirm hier ausgeschnitten habe . Hier ist also die berührbare Deckkraft eingerichtet, dieses Rasterelement ist eingerichtet, aber
wir müssen ein paar Dinge ändern. Im Kategorienbildschirm richte ich hier beispielsweise den Rasterelementstil ein. Jetzt könnten wir es hier
lassen und es irgendwie in unsere Gitterkachel einfügen und dann dort zusammenführen, wie Sie es gelernt haben, aber
ich werde einfach das gesamte Styling in der Komponente selbst einrichten, da wir nur
die Kategorie-Gitterkachel in der verwenden Raster auf dem Kategorienbildschirm. Also werde ich den Rasterelementstil hier zum Stylesheet in
dieser Datei
hinzufügen, daher funktioniert dies wieder. Der onPress-Handler funktioniert noch nicht. Wir werden dies bald beheben und jetzt können
wir zum Kategorienbildschirm zurückkehren und natürlich Importieren Sie unsere Komponente. Importieren Sie also die Kategorie-Raster-Kachelkomponente dort aus
dem Komponentenordner und dort die
Kategorieraster-Kachel und geben Sie diese jetzt einfach hier zurück, wenn wir ein neues Element rendern.
Natürlich funktioniert es so
nicht, wir müssen einige Daten in die Rasterkachel weiterleiten, damit sie dort korrekt funktionieren, und wir
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
den Titel. Das ist also itemData. Artikel. Titel und das ist jetzt eine
Requisite, die wir in der Kategorie Gitterkachel verwenden können, und ich möchte auch eine andere Requisite übergeben, die eine Funktion übergibt,
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
ich nur den Code ausführen, den ich derzeit in onPress ausführe. Also schneide ich dies von hier aus aus der
Kategorie-Raster-Kachel heraus, verschiebe es zurück in den Kategorien-Bildschirm, in diese Funktion, die ich an onSelect
übergebe, und jetzt müssen wir nur noch onSelect aus der Kategorie-Raster-Kachel heraus auslösen,
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
die Funktion auszulösen, die in der onSelect-Requisite übergeben wurde.
Jetzt kann der Titel, den ich hier ausgebe, auch nur Requisiten sein. Titel, weil wir diese
Titel-Requisite als Requisite auf unserer Kategorie-Raster-Kachel erhalten, geben wir sie hier weiter.
Damit haben wir unsere Komponente ein wenig aufgeteilt, aber jetzt möchte ich natürlich auch
ein bisschen mehr am Styling arbeiten. Zurück in der Kategorie-Raster-Kachel möchte ich zum Beispiel
die Farbe verwenden, die ich einrichte, da jede Kategorie eine Farbe erhält, die in dieser
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.
Sie können diese Requisite natürlich benennen, wie Sie möchten. Farbeigenschaft und
hier muss es sein. Farbe, da wir die Eigenschaftsfarbe hier im Modell und jetzt in einer
Kategorie-Raster-Kachel benannt haben, können wir diese Farbe verwenden, um diese hier zu formatieren.
Wie kann man das dann stylen, wie soll das aussehen? Durch Hinzufügen eines Stils zur Ansicht innerhalb
der berührbaren Deckkraft, da die berührbare Deckkraftkomponente selbst unsichtbar ist, die Ansicht jedoch nicht
vorhanden ist, können wir ein Objekt übergeben und die Hintergrundfarbe hier
auf Requisiten setzen. Farbe.
Mal sehen, wie das aussieht. Wenn wir das speichern und darauf warten, dass es neu geladen
wird, sieht es nicht schlecht aus, aber
es ist zu klein. Es sollte das gesamte Rasterelement ausfüllen und nicht nur die Zeile mit dem Text darin.
Um dies zu verbessern, werde ich diesen Inline-Stil hier haben, aber ich werde ihn zu einem umgebenden Objekt mit einer anderen
Stilkonfiguration zusammenführen, die ich im Stylesheet eingerichtet habe, und ich werde diesen Container benennen. Sie können ihn beliebig benennen wollen,
Stile Container, ziehen
Sie dort auch alle Schlüssel-Wert-Paare heraus, damit wir
diese Stile hier und jetzt zusammenführen. Container ist ein Stylesheet-Objekt, das wir dort unten hinzufügen können, und hier
können wir Flex eins festlegen, um dies sicherzustellen Jeder Gegenstand füllt den gesamten Raum aus, den
er bekommt, und jetzt sieht das viel besser aus.
Jetzt bin ich immer noch nicht
100% glücklich, ich möchte hier einen kleinen Randradius hinzufügen, sagen wir 10, um einige abgerundete Ecken
zu haben, und natürlich können Sie hier jedes gewünschte
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
eine Höhe von 3, Höhe für Android, wenn Sie sich erinnern, da diese Schatteneigenschaften nur iOS betreffen, so dass
wir ein wenig von dieser dreidimensionalen Karte erhalten Schauen Sie und
natürlich, wie ich bereits erwähnte, können Sie dies so gestalten, wie Sie möchten.
Außerdem möchte ich jetzt sicherstellen, dass dieser Text hier in der unteren rechten Ecke steht
und natürlich
ein wenig aufgefüllt ist, ein wenig Abstand. Also füge ich hier ein wenig Polsterung hinzu, sagen
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
handelt Unten hier und jetzt, um es auch auf der horizontalen Achse nach rechts zu verschieben, habe ich
die Ausrichtungselemente so eingestellt, dass sie auch das
Ende biegen, und dies verschiebt das zum Ende der Querachse, das in einer normalen Ansicht von links nach
rechts ist, wo Sie es nicht getan haben Ändern Sie die Flexrichtung. Damit erhalten wir diesen Look, von dem ich sagen
würde, dass er besser ist, aber natürlich könnte sich auch der Text hier, das Textstyling ändern und ein bisschen
mehr Polsterung könnte
gut aussehen, vielleicht 15, aber natürlich können wir damit experimentieren und auch Eine wichtige Randnotiz: In dieser
App werde ich mich nicht darauf konzentrieren, hier ein vollständig ansprechendes Erlebnis
zu schaffen. Ich werde versuchen, dies kurz und prägnant zu halten, da der Schwerpunkt dieses Moduls natürlich auf
der Navigation liegt. Daher werde ich dies nicht optimieren für alle möglichen Bildschirme und Plattformen.
Dies ist etwas, was Sie natürlich als Übung tun
können. Ich werde mich nicht daran halten, dieses Modul nicht unnötig aufzublähen, also werde ich einfach ein Styling einrichten, das
auf diesen Emulatoren gut aussieht.
Davon abgesehen könnte ein bisschen mehr Polsterung sinnvoll sein, und ich möchte den Titel auch
hier stylen. Daher füge ich hier beispielsweise
den Titelstil hinzu,
der im Stylesheet eingerichtet ist, und
füge ihn hier und da hinzu, den ich verwenden möchte meine Schriftfamilie, offen ohne Fettdruck, die
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
wenig auf 22 geändert. Wir speichern das,
das sieht ganz anständig aus.
Jetzt gibt es noch eine letzte Sache,
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
dieser ist, tatsächlich abgeschnitten wird, was meiner Meinung nach aussieht ein bisschen schöner. Und zu guter Letzt werden Sie vielleicht bemerken, dass
dies auf Android für leicht und schön hier links ist, weil es in zwei
Zeilen unterteilt ist, um sicherzustellen, dass dies auch rechts ist, auf
den Titel hier werde ich setzen Text nach rechts ausrichten, um zu erzwingen, dass dies rechts ist.
Warten wir also, bis das neu geladen ist,
und jetzt sieht es so aus, wie es sollte.
Nun, das ist hier nicht schlecht.
Jetzt werden Sie vielleicht bemerken, dass der Effekt etwas seltsam aussieht, wenn ich hier auf ein Element tippe.
Wir bekommen diesen seltsamen zusätzlichen Rand darum herum.
Jetzt werde ich hier noch etwas tun, das völlig optional ist, aber ich werde es hier hinzufügen, ich werde die
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
dies unterstützt wird.
Also hier habe ich meine berührbare Komponente, die standardmäßig berührbare
Deckkraft ist, aber wenn Plattform. os ist gleich Android und wie Sie zuvor im Kurs erfahren haben, ist die
Version größer oder gleich 21, dann wissen wir, dass berührbares natives Feedback unterstützt
wird, also setze ich berührbare Komponente gleich berührbarem nativem Feedback, wie folgt.
Verwenden Sie hier eine berührbare Komponente anstelle einer berührbaren Deckkraft.
Damit sollten wir einen schönen Welleneffekt
auf Android haben. Auf
iOS haben wir den gewünschten Deckkrafteffekt und auf Android haben wir
jetzt einen Welleneffekt, aber das Styling ist jetzt deaktiviert.
Dies können wir jedoch beheben, indem wir eine zusätzliche Ansicht hinzufügen, die unseren Rasterelementstil anstelle
der berührbaren Komponente hier erhält. Damit müssen
wir der berührbaren Komponente nur eine zusätzliche Stileigenschaft hinzufügen und eine flexible festlegen.
Ich mache es mit einem Inline-Stil
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
gleich aus
und fühlt sich auch so an. Der Welleneffekt ist da.
Jetzt werden jedoch nicht unsere abgerundeten Ecken verwendet, sondern ein Quadrat oder ein Rechteck gerendert, und Sie haben auch früher gelernt, wie
Sie dies beheben können. Um dies zu
beheben, müssen wir nur das Rasterelement bearbeiten, den Randradius von 10 hinzufügen
und dann den Überlauf verbergen, um sicherzustellen, dass untergeordnete Elemente nicht außerhalb dieser Umbruchansicht gerendert werden können, was
bedeutet, dass
die Welligkeit auftritt Der Effekt kann nicht außerhalb dieser abgerundeten Box liegen.
Jetzt haben wir diesen Look und das ist die einzige Anpassung, die ich hier für verschiedene Plattformen vornehmen
möchte, und damit sieht das nicht schlecht aus, würde ich sagen.
Jetzt können Sie natürlich das Aussehen anpassen, die Schriftgröße anpassen und so weiter, damit das auf Ihren
Geräten, die Sie testen, wirklich gut aussieht.
Ich bin mit diesem Look zufrieden und jetzt ist es wirklich an der Zeit, auch einige Rezepte zu rendern, wenn
wir hier eine Kategorie auswählen.