Upewnijmy się więc, że możemy przejść do ekranu edycji produktu i
oczywiście po pierwsze napełnię go trochę życiem, importując React z React, a następnie importując niektóre rzeczy z React Native
i te niektóre rzeczy na razie obejmie widok i tekst, a także arkusz stylów,
którego będziemy potrzebować
później, a następnie tutaj mamy ekran edycji produktu, w którym otrzymam rekwizyty i muszę zwrócić trochę jsx.
Ustawiłem tutaj mój obiekt stylów za pomocą arkusza stylów. utworzyć tak, a następnie możemy wyeksportować ekran
edycji produktu jako domyślny.
Teraz tutaj w samym komponencie, na chwilę, aby zobaczyć, że to
działa, możemy wyświetlić widok z tekstem, w którym mówimy, że ekran edycji produktu,
a później, oczywiście, wyślemy bardziej pomocne rzeczy tu i teraz
aby się tam dostać, ponownie musimy zarejestrować to w
nawigatorze, jest to część nawigatora administratora, więc zaimportujmy ten ekran, zaimportuj
ekran edycji produktu z ekranów ekran edycji użytkownika, a następnie dodaj go tutaj do administratora, może z edytuj produkt jako
identyfikator, wskaż ekran edycji produktu.
Teraz powinniśmy być w stanie się tam ogólnie przenieść, ale oczywiście musimy teraz uruchomić akcję nawigacyjną, aby
do niego dotrzeć, i to jest coś, co chcę zrobić z poziomu ekranu produktu użytkownika, kiedy to
zaznaczymy lub po naciśnięciu przycisku edytuj, to chcę Zrób to samo.
Ponownie utworzę tutaj funkcję, aby nie powielać mojego
kodu, nie wybierać produktu ani nie edytować programu obsługi produktu. Jest to funkcja, w której spodziewam się uzyskać identyfikator, który
chcę
edytować, a więc identyfikator produktu, który chcę do edycji i tutaj, chcę użyć nawigacji rekwizytów, przejść do ekranu edycji produktu, więc
do ekranu z tym identyfikatorem, który oczywiście mam, ponieważ jest to identyfikator, który
właśnie zarejestrowałem tutaj
i chcę przesłać tutaj identyfikator produktu.
Tak więc identyfikator, który otrzymuję jako argument tutaj w funkcji, jest przekazywany jako parametr
routingu, teraz edycja procedury obsługi produktu jest funkcją, którą należy wykonać tutaj
po kliknięciu przycisku edycji, tam przesyłam itemData. pozycja. id i ja robimy to samo tutaj w
tym przypadku na instrukcji obsługi.
Jeśli się temu przyjrzymy,
wrócimy tutaj, adminie, kliknij tutaj, ekran edycji produktu, także jeśli
kliknę przycisk edycji, więc to działa. Teraz, aby dodać nowe produkty, chcę przejść do tego
samego ekranu, ale bez podawania identyfikatora, co pozwoli nam dowiedzieć się, czy jesteśmy w trybie edycji, czy dodać
na ekranie edycji produktu, sprawdzając, czy mamy identyfikator albo nie.
Aby przejść do ekranu dodawania produktu, możemy dodać element akcji, a więc element do paska
nagłówka tutaj na ekranie produktu użytkownika, który powinien znajdować się po prawej stronie, więc dodam nagłówek tutaj.
To jest właśnie to, co tutaj skonfigurowaliśmy, więc skopiuję to za pomocą przycisków nagłówka, ale tutaj można
dodać identyfikator, a ikonę należy utworzyć md i iOS utworzyć, aby mieć tę ikonę, która sygnalizuje, że mamy zamiar stworzyć
coś, a także tutaj, nie przełączam szuflady, ale zamiast tego wywołuję nawigację i idę do edycji
produktu, a teraz, jak już wspomniałem, ważne, nie przekazując tutaj żadnych parametrów, ponieważ dodajemy nowy
produkt, na pewno nie przejdziemy każdy istniejący identyfikator tutaj.
Po dodaniu tego, na przykład na Androidzie, aby pomieszać rzeczy na ekranie administratora, możemy teraz nacisnąć tę
ikonę paska akcji, aby przejść do ekranu.
Teraz oczywiście brakuje nagłówka i naprawimy to, ale zanim to zrobimy,
jest coś jeszcze, co chcę naprawić, kubek kawy jest właściwie wycięty
tutaj na iOS, widać, że G jest trochę przycięty poza tym, być może zauważyłeś
wcześniej, że kiedy miałem przedmioty na wózku i je usunąłem, że wcześniej miałem
tutaj minus, teraz naprawmy obie rzeczy. Powód, dla którego odcina
się kubek kawy lub tekst, jest prosty. W niniejszym elemencie produktu przypisujemy wysokość do naszych różnych elementów, tak jak
obraz miał 60% wysokości,
szczegóły miały 15, dajmy te 17, a zatem odejmujemy dwa punkty procentowe od akcji, tak aby tytuł miał trochę
więcej miejsca, a to zapewnia, że kubek do kawy jest na
miejscu, to była prosta poprawka.
Teraz, jeśli chodzi o wózek, problem polega
po prostu na tym, że podczas
pracy z liczbami zmiennoprzecinkowymi JavaScript nie ma takiej precyzji, jak byś tego
chciał, i tak
właśnie działa JavaScript, a zatem
jeśli dodasz dwa elementy, a następnie usuniesz oboje, w rzeczywistości możesz otrzymać
wartość, która w miejscu dziesiętnym nie jest równa 0. Teraz, co możesz zrobić, aby to naprawić
na ekranie koszyka, jest tutaj, gdy podajesz kwotę z ustaloną, możesz faktycznie użyć matematyki wbudowanej w JavaScript, zaokrąglić i owinąć
to do stałej wartości tutaj i pomnożyć ją przez 100, a następnie, podziel to przez 100.
Zapewni to, że nigdy nie skończysz z
tym minusem, znowu ma to związek z tym, jak JavaScript wewnętrznie obsługuje te liczby zmiennoprzecinkowe.
Więc teraz, jeśli ponownie dodamy tutaj kilka przedmiotów i dodamy je do koszyka, ogólnie wygląda to dobrze, więc nasza logika nadal
działa, ale teraz,
jeśli usuniemy tutaj przedmioty, zawsze powinniśmy otrzymać takie zero, nigdy minus przed
nim.
To tylko niewielka poprawa w zakresie sposobu, w jaki to wyprowadzamy, a po tych wizualnych poprawkach cofnijmy
się do produktów użytkownika i upewnij się, że teraz, kiedy możemy przejść do edycji i
dodać ekran, który jest jednym
i tym samym ekranem oczywiście pokazujemy również niektóre dane wejściowe i ładujemy dane dla produktu, który należy edytować w razie potrzeby.