Stellen wir also sicher, dass wir zum Bildschirm zum Bearbeiten von Produkten gehen können, und
dafür werde ich ihn natürlich zuerst mit etwas Leben füllen, indem ich React aus React importiere und dann auch einige Dinge aus React Native
und diese einige Dinge für den Moment importiere wird die Ansicht und den Text sowie ein Stylesheet enthalten,
das wir später benötigen
werden, und dann haben wir hier den Bildschirm zum Bearbeiten des Produkts, auf dem ich Requisiten bekomme und etwas jsx zurückgeben muss.
Ich habe mein Styles-Objekt hier mit Stylesheet eingerichtet. Erstellen Sie so und dann können wir den Bildschirm zum
Bearbeiten von Produkten als Standard exportieren.
Jetzt hier in der Komponente selbst können wir für den Moment, nur um zu
sehen, dass dies funktioniert, eine Ansicht mit einem Text darin ausgeben, in der wir sagen, dass der Bildschirm
zum Bearbeiten des Produkts und später natürlich hier und jetzt weitere hilfreiche Dinge
ausgeben Um dorthin zu gelangen, müssen wir dies erneut in einem Navigator
registrieren, der Teil des Admin-Navigators ist. Importieren Sie also diesen Bildschirm, importieren Sie den Bildschirm
zum Bearbeiten von Produkten von Bildschirmen, die vom Benutzer bearbeitet werden, und fügen Sie ihn dann hier zum Admin-Navigator hinzu, möglicherweise mit Produkt als Kennung bearbeiten,
zeigen Sie auf den Bildschirm Produkt bearbeiten.
Jetzt sollten wir in der Lage sein, uns allgemein dorthin zu bewegen, aber natürlich müssen wir jetzt eine Navigationsaktion
auslösen, um sie zu erreichen, und das möchte ich auf dem Bildschirm des Benutzerprodukts tun, wenn wir dies auswählen
oder wenn wir auf Bearbeiten klicken, dann möchte ich mach das selbe.
Daher werde ich hier erneut eine Funktion erstellen, damit
ich meinen Code nicht dupliziere, kein Produkt auswähle oder keinen Produkthandler bearbeite. Dies ist eine Funktion, bei der ich erwarte, die ID zu
erhalten, die
ich bearbeiten möchte, also die ID des gewünschten Produkts Zum Bearbeiten und hier möchte ich die Requisitennavigation verwenden, zum Produktbearbeitungsbildschirm navigieren, also zum Bildschirm
mit dieser Kennung, die ich natürlich habe, da dies die Kennung ist, die ich
gerade hier registriert
habe und die Produkt-ID hier weiterleiten möchte.
Die ID, die ich hier in der Funktion als Argument erhalte, wird als Routing-Parameter weitergeleitet. Jetzt ist
der Bearbeitungsprodukt-Handler die Funktion, die hier ausgeführt werden soll, wenn wir auf die Schaltfläche
Bearbeiten klicken. Dort leite ich itemData weiter. Artikel. id und ich machen das gleiche hier in
diesem auf ausgewählten handler natürlich.
Wenn wir uns das ansehen, gehen wir
zurück, Admin, klicken Sie hier, um den Produktbildschirm zu bearbeiten, auch wenn ich
auf die Schaltfläche Bearbeiten klicke, damit das funktioniert. Um nun neue Produkte hinzuzufügen, möchte ich zum selben Bildschirm
wechseln, ohne jedoch eine ID einzugeben. Auf diese Weise können wir herausfinden, ob wir uns in diesem Bearbeitungsproduktbildschirm im Bearbeitungs- oder
Hinzufügungsmodus befinden, indem wir prüfen, ob wir eine ID haben oder nicht.
Um zu diesem Bildschirm zum Hinzufügen von Produkten zu gelangen, können wir ein Aktionselement hinzufügen, also
ein Element zur Kopfzeile hier im Benutzerproduktbildschirm, und das sollte rechts sein, damit ich hier Kopfzeilen hinzufüge.
Dies ist am Ende genau das, was wir hier eingerichtet haben, also werde ich das mit den Header-Schaltflächen kopieren, aber die Kennung
hier könnte hinzugefügt werden und das Symbol sollte md create und ios create sein, um dieses Symbol zu haben, das signalisiert, dass wir im Begriff
sind etwas erstellen und auch hier schalte ich die Schublade nicht um, sondern rufe stattdessen navigieren auf und gehe
zum Bearbeiten des Produkts. Wie ich bereits erwähnt habe, werden wir, ohne hier Parameter zu übergeben, weil wir
ein neues Produkt hinzufügen, mit Sicherheit nicht übergeben eine vorhandene ID hier.
Und wenn dies hinzugefügt wurde, zum Beispiel unter Android, um die Dinge auf dem Admin-Bildschirm zu verwechseln, können wir jetzt
dieses Aktionsleistensymbol drücken, um zum Bildschirm zu gelangen.
Jetzt fehlt hier natürlich der Header und wir werden das beheben, aber bevor wir dies
tun, gibt es noch etwas, das ich beheben möchte. Die Kaffeetasse ist hier unter
iOS tatsächlich abgeschnitten. Sie sehen, dass das G ein wenig abgeschnitten ist Aus und außerdem haben Sie vielleicht früher
bemerkt, dass ich, als ich Artikel auf dem Einkaufswagen hatte und sie entfernte, früher hier ein Minus
hatte. Lassen Sie uns jetzt beide Dinge reparieren. Für die Kaffeetasse oder für
das Abschneiden von Text ist der Grund einfach. In der Produktartikelkomponente hier weisen wir unseren verschiedenen Elementen die Höhe zu, z. B.
hatte das Bild eine Höhe
von 60%, die Details hatten 15, geben wir diese 17 an und ziehen daher zwei Prozentpunkte von den Aktionen ab, damit der Titel
ein wenig hat mehr Platz und das stellt sicher, dass die Kaffeetasse da
ist, das war eine einfache Lösung.
Für den Warenkorb besteht das Problem einfach darin,
dass Javascript hinter den Kulissen bei
der Arbeit mit Gleitkommazahlen nicht die Genauigkeit hat, die Sie sich vielleicht wünschen
würden, und genau
so funktioniert Javascript. Wenn Sie
also zwei Elemente hinzufügen und dann entfernen Bei beiden kann es tatsächlich zu
einem Wert kommen, der an einer Dezimalstelle nicht 0 ist. Was Sie jetzt tun können, um dies auf
dem Warenkorbbildschirm zu beheben, ist hier, wenn Sie den Betrag mit "fest" ausgeben. Sie können tatsächlich Mathematik verwenden, die in Javascript integriert ist. Runden
Sie diesen Wert auf einen festen Wert und multiplizieren Sie ihn mit 100 und danach. Teilen Sie dies durch 100.
Dies stellt sicher, dass Sie nie mit
diesem Minus enden. Dies hat wiederum damit zu tun, wie Javascript diese Gleitkommazahlen intern behandelt.
Wenn wir hier also wieder ein paar Elemente hinzufügen und sie in den Warenkorb legen, sieht dies im Allgemeinen gut aus, sodass unsere Logik immer noch
funktioniert. Wenn wir jetzt
Elemente hier entfernen, sollten wir immer eine Null wie diese erhalten, niemals eine Minus
davor.
Das ist also nur eine winzige Verbesserung in Bezug auf die Ausgabe. Wenn wir diese visuellen Verbesserungen aus dem
Weg räumen, kehren wir zu den Benutzerprodukten zurück und stellen sicher, dass wir jetzt den Bearbeitungs- und
Hinzufügungsbildschirm erreichen können, der ein
und derselbe Bildschirm ist Natürlich zeigen wir dort auch einige Eingaben und laden einige Daten für ein Produkt, die gegebenenfalls bearbeitet werden sollten.