1
00:00:02,360 --> 00:00:08,330
Upewnijmy się więc, że możemy przejść do ekranu edycji produktu i

2
00:00:08,330 --> 00:00:17,550
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

3
00:00:17,850 --> 00:00:24,960
i te niektóre rzeczy na razie obejmie widok i tekst, a także arkusz stylów,

4
00:00:24,960 --> 00:00:26,610
którego będziemy potrzebować

5
00:00:26,670 --> 00:00:34,980
później, a następnie tutaj mamy ekran edycji produktu, w którym otrzymam rekwizyty i muszę zwrócić trochę jsx.

6
00:00:34,980 --> 00:00:45,420
Ustawiłem tutaj mój obiekt stylów za pomocą arkusza stylów. utworzyć tak, a następnie możemy wyeksportować ekran

7
00:00:45,450 --> 00:00:49,310
edycji produktu jako domyślny.

8
00:00:49,390 --> 00:00:55,030
Teraz tutaj w samym komponencie, na chwilę, aby zobaczyć, że to

9
00:00:55,030 --> 00:01:01,990
działa, możemy wyświetlić widok z tekstem, w którym mówimy, że ekran edycji produktu,

10
00:01:01,990 --> 00:01:07,210
a później, oczywiście, wyślemy bardziej pomocne rzeczy tu i teraz

11
00:01:07,270 --> 00:01:12,120
aby się tam dostać, ponownie musimy zarejestrować to w

12
00:01:13,150 --> 00:01:18,940
nawigatorze, jest to część nawigatora administratora, więc zaimportujmy ten ekran, zaimportuj

13
00:01:18,940 --> 00:01:29,060
ekran edycji produktu z ekranów ekran edycji użytkownika, a następnie dodaj go tutaj do administratora, może z edytuj produkt jako

14
00:01:29,060 --> 00:01:32,330
identyfikator, wskaż ekran edycji produktu.

15
00:01:32,330 --> 00:01:37,250
Teraz powinniśmy być w stanie się tam ogólnie przenieść, ale oczywiście musimy teraz uruchomić akcję nawigacyjną, aby

16
00:01:37,250 --> 00:01:42,320
do niego dotrzeć, i to jest coś, co chcę zrobić z poziomu ekranu produktu użytkownika, kiedy to

17
00:01:42,560 --> 00:01:46,060
zaznaczymy lub po naciśnięciu przycisku edytuj, to chcę Zrób to samo.

18
00:01:46,220 --> 00:01:50,040
Ponownie utworzę tutaj funkcję, aby nie powielać mojego

19
00:01:50,240 --> 00:02:00,170
kodu, nie wybierać produktu ani nie edytować programu obsługi produktu. Jest to funkcja, w której spodziewam się uzyskać identyfikator, który

20
00:02:00,200 --> 00:02:01,420
chcę

21
00:02:01,460 --> 00:02:11,630
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

22
00:02:11,780 --> 00:02:17,900
do ekranu z tym identyfikatorem, który oczywiście mam, ponieważ jest to identyfikator, który

23
00:02:17,930 --> 00:02:19,330
właśnie zarejestrowałem tutaj

24
00:02:21,370 --> 00:02:24,580
i chcę przesłać tutaj identyfikator produktu.

25
00:02:25,730 --> 00:02:30,150
Tak więc identyfikator, który otrzymuję jako argument tutaj w funkcji, jest przekazywany jako parametr

26
00:02:30,200 --> 00:02:33,960
routingu, teraz edycja procedury obsługi produktu jest funkcją, którą należy wykonać tutaj

27
00:02:33,980 --> 00:02:40,850
po kliknięciu przycisku edycji, tam przesyłam itemData. pozycja. id i ja robimy to samo tutaj w

28
00:02:40,850 --> 00:02:42,790
tym przypadku na instrukcji obsługi.

29
00:02:45,360 --> 00:02:48,400
Jeśli się temu przyjrzymy,

30
00:02:48,510 --> 00:02:53,630
wrócimy tutaj, adminie, kliknij tutaj, ekran edycji produktu, także jeśli

31
00:02:53,640 --> 00:03:00,030
kliknę przycisk edycji, więc to działa. Teraz, aby dodać nowe produkty, chcę przejść do tego

32
00:03:00,080 --> 00:03:05,730
samego ekranu, ale bez podawania identyfikatora, co pozwoli nam dowiedzieć się, czy jesteśmy w trybie edycji, czy dodać

33
00:03:05,730 --> 00:03:08,940
na ekranie edycji produktu, sprawdzając, czy mamy identyfikator albo nie.

34
00:03:08,940 --> 00:03:16,560
Aby przejść do ekranu dodawania produktu, możemy dodać element akcji, a więc element do paska

35
00:03:16,560 --> 00:03:24,280
nagłówka tutaj na ekranie produktu użytkownika, który powinien znajdować się po prawej stronie, więc dodam nagłówek tutaj.

36
00:03:25,290 --> 00:03:32,530
To jest właśnie to, co tutaj skonfigurowaliśmy, więc skopiuję to za pomocą przycisków nagłówka, ale tutaj można

37
00:03:32,530 --> 00:03:40,840
dodać identyfikator, a ikonę należy utworzyć md i iOS utworzyć, aby mieć tę ikonę, która sygnalizuje, że mamy zamiar stworzyć

38
00:03:40,840 --> 00:03:47,260
coś, a także tutaj, nie przełączam szuflady, ale zamiast tego wywołuję nawigację i idę do edycji

39
00:03:47,260 --> 00:03:53,650
produktu, a teraz, jak już wspomniałem, ważne, nie przekazując tutaj żadnych parametrów, ponieważ dodajemy nowy

40
00:03:53,650 --> 00:03:57,910
produkt, na pewno nie przejdziemy każdy istniejący identyfikator tutaj.

41
00:03:58,970 --> 00:04:06,070
Po dodaniu tego, na przykład na Androidzie, aby pomieszać rzeczy na ekranie administratora, możemy teraz nacisnąć tę

42
00:04:06,430 --> 00:04:09,540
ikonę paska akcji, aby przejść do ekranu.

43
00:04:09,710 --> 00:04:14,540
Teraz oczywiście brakuje nagłówka i naprawimy to, ale zanim to zrobimy,

44
00:04:14,540 --> 00:04:19,120
jest coś jeszcze, co chcę naprawić, kubek kawy jest właściwie wycięty

45
00:04:19,130 --> 00:04:25,220
tutaj na iOS, widać, że G jest trochę przycięty poza tym, być może zauważyłeś

46
00:04:25,220 --> 00:04:30,680
wcześniej, że kiedy miałem przedmioty na wózku i je usunąłem, że wcześniej miałem

47
00:04:31,380 --> 00:04:37,490
tutaj minus, teraz naprawmy obie rzeczy. Powód, dla którego odcina

48
00:04:37,490 --> 00:04:46,400
się kubek kawy lub tekst, jest prosty. W niniejszym elemencie produktu przypisujemy wysokość do naszych różnych elementów, tak jak

49
00:04:46,400 --> 00:04:48,420
obraz miał 60% wysokości,

50
00:04:48,550 --> 00:04:56,090
szczegóły miały 15, dajmy te 17, a zatem odejmujemy dwa punkty procentowe od akcji, tak aby tytuł miał trochę

51
00:04:56,080 --> 00:05:00,440
więcej miejsca, a to zapewnia, że kubek do kawy jest na

52
00:05:00,440 --> 00:05:02,540
miejscu, to była prosta poprawka.

53
00:05:02,540 --> 00:05:05,560
Teraz, jeśli chodzi o wózek, problem polega

54
00:05:05,570 --> 00:05:07,910
po prostu na tym, że podczas

55
00:05:07,910 --> 00:05:12,950
pracy z liczbami zmiennoprzecinkowymi JavaScript nie ma takiej precyzji, jak byś tego

56
00:05:12,950 --> 00:05:14,630
chciał, i tak

57
00:05:14,630 --> 00:05:16,800
właśnie działa JavaScript, a zatem

58
00:05:17,000 --> 00:05:21,910
jeśli dodasz dwa elementy, a następnie usuniesz oboje, w rzeczywistości możesz otrzymać

59
00:05:21,920 --> 00:05:29,580
wartość, która w miejscu dziesiętnym nie jest równa 0. Teraz, co możesz zrobić, aby to naprawić

60
00:05:29,580 --> 00:05:39,550
na ekranie koszyka, jest tutaj, gdy podajesz kwotę z ustaloną, możesz faktycznie użyć matematyki wbudowanej w JavaScript, zaokrąglić i owinąć

61
00:05:39,610 --> 00:05:47,830
to do stałej wartości tutaj i pomnożyć ją przez 100, a następnie, podziel to przez 100.

62
00:05:47,850 --> 00:05:50,580
Zapewni to, że nigdy nie skończysz z

63
00:05:50,610 --> 00:05:56,420
tym minusem, znowu ma to związek z tym, jak JavaScript wewnętrznie obsługuje te liczby zmiennoprzecinkowe.

64
00:05:56,440 --> 00:06:06,210
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

65
00:06:06,210 --> 00:06:07,700
działa, ale teraz,

66
00:06:07,710 --> 00:06:13,170
jeśli usuniemy tutaj przedmioty, zawsze powinniśmy otrzymać takie zero, nigdy minus przed

67
00:06:13,170 --> 00:06:13,740
nim.

68
00:06:13,800 --> 00:06:20,070
To tylko niewielka poprawa w zakresie sposobu, w jaki to wyprowadzamy, a po tych wizualnych poprawkach cofnijmy

69
00:06:20,070 --> 00:06:25,470
się do produktów użytkownika i upewnij się, że teraz, kiedy możemy przejść do edycji i

70
00:06:25,470 --> 00:06:27,480
dodać ekran, który jest jednym

71
00:06:27,480 --> 00:06:34,940
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.