Beginnen wir mit dem Bestätigungsdialog hier im Bildschirm Produkt bearbeiten. Wir können einfach die Alert-API aus React
Native importieren, wodurch wir einen netten Alert anzeigen und dann hier eine neue Methode hinzufügen können. Vielleicht könnten wir das alle
in einer Linie tun, aber einen etwas strukturierteren Code haben, in dem ich meinen Lösch-Handler habe.
Übrigens, wie Sie Ihre Funktionen benennen, liegt ganz bei Ihnen. Ich mag es einfach, wenn dieser Handler hier benannt wird, wenn ich
ihn sozusagen meinen Ereignis-Emittern im jsx-Code zuweise, und dort können wir alert aufrufen. Warnung, um eine Warnung mit dem
Titel "Sind Sie
sicher?"
anzuzeigen. Möchten Sie dieses Element wirklich löschen und dann ein
Array mit allen Schaltflächen, die
wir präsentieren möchten, wobei die Schaltfläche Nummer eins den Text "Nein" und einen Standardstil enthält.
Es gibt nur drei Standardstile oder vorkonfigurierte Stile, aus denen Sie auswählen können, und keinen speziellen Handler
für diese erste Schaltfläche.
Die zweite Schaltfläche hat ja, da möchte
ich einen destruktiven Stil haben, um dies als
hey zu markieren, dies wird etwas löschen und der onPress-Handler hier hält dann am Ende eine Funktion,
die die Löschaktion wirklich auslöst.
Jetzt ist es also der Lösch-Handler, den ich ausführen möchte, wenn wir auf diese Löschschaltfläche klicken, und daher bin ich natürlich in der falschen
Komponente, die ich gerade gesehen habe.
Lassen Sie uns dies
abschneiden, es befindet sich nicht im Bildschirm
zum Bearbeiten von Produkten, wir benötigen dort
keinen Alarmimport, es ist der Bildschirm für Benutzerprodukte, über den ich spreche. Dort müssen wir eine Warnung importieren,
dort sollten wir diesen Handler hinzufügen und jetzt sollte der Löschhandler hier dieser Löschtaste
zugewiesen werden, so dass wir hier nur auf den Löschhandler zeigen können und diese anonyme
Funktion von dort unten abgeschnitten werden kann und sein kann hierher bewegt und diesen onPress-Handler für diese
Schaltfläche ersetzt. Jetzt sollten wir dieses Popup und diesen Bestätigungsdialog erhalten, bevor wir tatsächlich etwas löschen.
Wenn ich also auf Löschen klicke, frage ich jetzt, wenn
ich
Nein drücke, passiert nichts, nur
wenn ich auf Ja klicke, löschen wir dies. Ein kleiner Fehler ist natürlich, dass
die benötigten Artikeldaten verfügbar
sein müssen.
Hier leiten wir also die ID weiter, die wir löschen
möchten. Für den Löschhandler benötigen wir also die ID des Produkts, auf das wir diesen Handler anwenden,
damit hier diese ID verfügbar ist. Dies bedeutet, dass der Löschhandler aufgerufen wird Dort unten müssen
wir sicherstellen, dass es die ID bekommt.
Es gibt also zwei Möglichkeiten, eine anonyme Funktion,
bei der wir den Löschhandler manuell ausführen und itemData weiterleiten. Artikel. ID oder
Alternative dazu, übergeben Sie den Lösch-Handler wie folgt, aber verwenden Sie bind, um alle Argumente, die
diese Funktion erhält, vorzukonfigurieren. Bind benötigt immer einen Wert für dieses Schlüsselwort innerhalb der Funktion, die es ausführen wird. Dort können wir dies einfach
übergeben, es spielt keine Rolle, aber das zweite
Argument ist jetzt das erste Argument, das der Lösch-Handler erhält, also
übergeben wir hier itemData. Artikel. Ich würde. Damit stellen wir sicher, dass
wir tatsächlich Ja drücken können und es wird funktionieren. Wenn wir jetzt hierher zurück zum Administrator gehen, klicken Sie auf Löschen, drücken
Sie Ja, dies funktioniert jetzt wirklich und wenn wir Nein drücken, passiert nichts, Ja löscht es.
Das ist also
das Erste, und um sicherzustellen, dass wir zurück navigieren. Wenn wir dies speichern, müssen wir jetzt
zum Bildschirm zum Bearbeiten des Produkts und dort in unserem Submit-Handler gehen, unabhängig davon, ob wir das Update versenden oder eine
Produktaktion erstellen Ende Ich möchte auch die Requisitennavigation aufrufen. Zurück, um zum vorherigen Bildschirm zurückzukehren. Und wenn wir dies jetzt speichern und zum Administrationsbildschirm gehen und
ich vorerst ein leeres Produkt einreiche, erhalte ich natürlich eine Warnung, aber dies
funktioniert im Allgemeinen, dies geht zurück und wenn ich ein Produkt bearbeite, funktioniert
dies auch.
Damit sind wir nun mit dem gesamten Eingabemanagement fertig. Das verbleibende, was ich jetzt
tun möchte, bevor ich das alles wirklich abgeschlossen habe, ist, dass ich das Produkt ein bisschen
mehr und die Art und
Weise, wie wir es tun, optimieren möchte. Wenn Sie unseren Kartenlook hier mit dem Schatten usw. wiederverwenden,
verwenden wir ihn
in mehreren Komponenten. Wenn Sie feststellen, dass Sie etwas in mehreren Komponenten verwenden, möchten Sie möglicherweise immer
darüber nachdenken, ob Sie dies ein
bisschen mehr optimieren können, und zwar hier Wir haben Optimierungspotential.
Wie können wir dies jedoch optimieren?
Nun, wir könnten hier in unserem UI-Ordner des Komponentenordners, den wir Warenkorb nennen,
eine separate Komponente erstellen. js, wo wir gerade diesen Warenkorb-Look aufbewahren. Eine Wagenkomponente kann
am Ende eine sehr einfache Komponente sein. Wir importieren React von React hier, weil wir eine Komponente erstellen müssen,
und wir importieren einfach so eine Ansicht von React Native. Jetzt erstellen wir hier unsere Warenkorbkomponente, in der wir einfach unsere Requisiten erhalten,
etwas jsx zurückgeben und diese Komponente in das exportieren Obwohl wir auch ein Styling einrichten müssen, da dies
die Kernidee dieser Komponente ist,
geht es darum, uns einige vorkonfigurierte Styles zu geben. Also werde ich meine Stile auch mit Stylesheet konstant
hinzufügen. Erstellen
Sie dort unten und jetzt, was ist der JSX-Code, den ich hier zurückgeben möchte?
Nun, das ist eine Ansicht, eine Ansicht, die tatsächlich alles einschließt, was wir dort
übergeben, also zwischen den Tags meiner Komponente, also nur Kinder darin, aber jetzt
kann diese Ansicht hier ein Standard-Styling erhalten, das ich Cart nennen werde und das sollte seien Sie die Stile,
mit denen ich sonst herum kopiere.
Hier ist mein Wagenstil in dieser Wagenkomponente genau das, was ich hier habe, das Produktelement, es
ist dieses
Schattenmaterial hier, die Höhe, der Randradius und die Hintergrundfarbe. Sie können das alles abschneiden und hier in den Einkaufswagen
legen.
Um dies noch ein wenig konfigurieren zu können, werde ich dies tatsächlich verbessern
und den Stil auf ein Objekt festlegen, in dem ich die Werte meines Stilwagens und alle Werte, die ich hier auf der Stil-Requisite erhalte, wie folgt zusammenführe.
Jetzt können wir sogar eine Stil-Requisite festlegen, wenn wir unseren Warenkorb verwenden und
unsere eigenen Stile übergeben, die mit diesen Standardkartenstilen zusammengeführt werden, da ich jetzt den Warenkorb
hier im Produktartikel verwenden kann, indem ich beispielsweise den Warenkorb aus importiere , und jetzt eine Ebene höher in den UI-Ordner, in die Warenkorbdatei und ersetzen Sie
diese Ansicht hier,
diese äußere Ansicht durch Karte
und ersetzen Sie daher natürlich auch das schließende Tag und geben Sie hier noch meine Produktspezifikationen
ein, also diese Höhe und den Rand .
Dies wird mit den anderen Karten-Looks zusammengeführt und alles zwischen den öffnenden
und schließenden Tags der Karte funktioniert einfach. Ich gebe dies hier mit Hilfe
von Requisitenkindern auf meine Karte weiter. Das Gleiche gilt für
den Bestellartikel. Dort müssen wir nur noch die Karte aus importieren und jetzt in den UI-Ordner gehen, um hier
zu kardieren und dann anstelle dieser Ansicht, dieser äußeren Ansicht
hier, eine Karte zu verwenden, diese durch eine Karte zu ersetzen und loszuwerden Diese
Kartenstile hier, das Schattenmaterial, die Höhe, der Randradius und die Hintergrundfarbe behalten nur
die speziellen Stile bei, in denen Sie zusammenführen möchten. Und jetzt ist der letzte Ort, an dem wir dies
verwenden können, der Warenkorbbildschirm. Dort habe ich auch meine Zusammenfassung, die diese Kartenstile verwendet.
Nun, wir können die Kartenkomponente wieder aus dem Komponentenordner, dem UI-Ordner dort
und dort, aus dem Warenkorb importieren. js-Datei und verwenden Sie jetzt die Kartenkomponente anstelle der Ansicht an
der Stelle, an der diese
Kartenstile angezeigt werden sollen. Hier also die Ansicht mit den Zusammenfassungsstilen.
Ich werde diese durch die Karte ersetzen. Bei den Zusammenfassungsstilen behalten wir alles
bei, was für diesen Bildschirm oder diese Komponente spezifisch ist, aber wir können die Schattenfarbe, den
Schattenradius, die Höhe und die Hintergrundfarbe des Randradius entfernen, die alle entfernt werden können.
Speichern wir das jetzt und Sie werden sehen, dass die App natürlich immer noch
funktioniert und genauso
aussieht wie zuvor, wenn ich dies zum Beispiel in den Warenkorb lege und dies bestelle und mir
meine Bestellungen ansehe, sieht alles so aus So wie es früher war, aber jetzt mit einem etwas optimaleren Code,
bei dem wir unsere Stile tatsächlich wiederverwenden und eine separate Präsentationskomponente für
sie haben, damit unsere anderen Komponenten etwas schlanker sein können und wir uns nicht
als wiederholen oft beim Einrichten dieses Warenkorbs aussehen. Ein weiterer Vorteil ist, dass wir keine Fehler eingeben können. Wenn wir
den Schattenradius in einer Komponente auf 8 und in einer anderen auf 10 setzen, sieht unsere App möglicherweise etwas inkonsistent aus.
Wir vermeiden dies, indem wir einige zentrale, auf das Styling fokussierte Komponenten haben, die diese Kernstile einrichten, die wir dann in
anderen Komponenten verwenden, wie wir es hier tun.