1 00:00:02,380 --> 00:00:08,420 Zacznijmy od okna dialogowego potwierdzenia tutaj na ekranie edycji produktu. Możemy po prostu zaimportować API alertu z 2 00:00:08,450 --> 00:00:16,490 React Native, co pozwala nam pokazać fajny alert, a następnie dodać tutaj nową metodę, być może wszyscy moglibyśmy zrobić 3 00:00:16,490 --> 00:00:22,830 to w linii, ale mieć nieco bardziej uporządkowany kod, w którym mam swoją funkcję usuwania. 4 00:00:23,020 --> 00:00:28,600 Nawiasem mówiąc, sposób, w jaki nazwiesz swoje funkcje, zależy wyłącznie od ciebie, podoba mi się ten program obsługi, jeśli przypisuję to moim 5 00:00:28,600 --> 00:00:35,950 emiterom zdarzeń w kodzie jsx, żeby tak powiedzieć, i tam możemy wywołać alert. alert, aby pokazać alert z 6 00:00:35,980 --> 00:00:37,690 tytułem Czy 7 00:00:37,720 --> 00:00:38,960 jesteś 8 00:00:39,880 --> 00:00:45,670 pewien, czy naprawdę chcesz usunąć ten element, a następnie 9 00:00:45,670 --> 00:00:48,940 tablicę ze wszystkimi przyciskami, które 10 00:00:48,940 --> 00:00:58,020 chcemy przedstawić, w przypadku gdy przycisk numer jeden ma tekst nie i styl domyślny? 11 00:00:58,060 --> 00:01:02,800 Istnieją tylko trzy style domyślne lub wstępnie skonfigurowane, które można wybierać, i żaden specjalny moduł obsługi 12 00:01:02,800 --> 00:01:03,930 tego pierwszego przycisku. 13 00:01:04,030 --> 00:01:07,180 Drugi przycisk ma tak, tam chcę 14 00:01:07,190 --> 00:01:10,640 mieć styl destrukcyjny, aby to zaznaczyć, bo 15 00:01:10,640 --> 00:01:17,900 hej to coś usunie, a tutaj program obsługi onPress ma w końcu funkcję, która 16 00:01:17,900 --> 00:01:20,540 naprawdę wywoła akcję usuwania. 17 00:01:20,610 --> 00:01:28,110 Więc teraz jest to procedura usuwania, którą chcę uruchomić, kiedy klikamy ten przycisk usuwania i dlatego oczywiście jestem w niewłaściwym 18 00:01:28,110 --> 00:01:30,080 składniku, który właśnie widziałem. 19 00:01:30,210 --> 00:01:31,610 Wytnijmy to, 20 00:01:31,800 --> 00:01:33,740 nie ma go na ekranie 21 00:01:33,750 --> 00:01:35,440 edycji produktu, nie potrzebujemy 22 00:01:35,460 --> 00:01:41,310 importu alertu, mówię o ekranie produktów użytkownika. Tam musimy zaimportować alert, tam powinniśmy 23 00:01:41,700 --> 00:01:47,380 dodać ten moduł obsługi, a teraz tutaj należy przypisać moduł usuwania do tego przycisku 24 00:01:47,400 --> 00:01:53,730 usuwania, więc tutaj możemy po prostu wskazać moduł usuwania, a tę anonimową funkcję można wyciąć 25 00:01:53,980 --> 00:02:00,790 z dołu i można przenieśliśmy się tutaj i zastąpiliśmy ten moduł obsługi onPress dla tego przycisku, a 26 00:02:00,790 --> 00:02:07,320 teraz z tym powinniśmy dostać to okienko wyskakujące, to okno dialogowe potwierdzenia, zanim faktycznie coś usuniemy. 27 00:02:07,330 --> 00:02:09,790 Więc jeśli kliknę na usuń, teraz pytam, jeśli 28 00:02:09,790 --> 00:02:10,210 nacisnę 29 00:02:10,210 --> 00:02:11,640 nie, nic się nie 30 00:02:11,650 --> 00:02:16,060 stanie, tylko jeśli kliknę tak, usuwamy to. Niewielki błąd polega oczywiście na tym, 31 00:02:16,060 --> 00:02:17,920 że potrzebne nam dane produktu 32 00:02:20,570 --> 00:02:21,790 muszą być dostępne. 33 00:02:21,830 --> 00:02:24,920 Więc tutaj przekazujemy identyfikator, który chcemy usunąć, więc tak 34 00:02:24,920 --> 00:02:30,180 naprawdę dla procedury usuwania, potrzebujemy identyfikatora produktu, do którego aplikujemy ten moduł obsługi, aby tutaj był 35 00:02:30,410 --> 00:02:35,360 dostępny ten identyfikator, a to oznacza, że gdy wywoływany jest moduł usuwania tam na 36 00:02:35,360 --> 00:02:37,980 dole musimy upewnić się, że dostanie identyfikator. 37 00:02:38,510 --> 00:02:40,150 Są więc dwa sposoby, aby to zrobić, anonimowa 38 00:02:40,400 --> 00:02:46,100 funkcja, w której ręcznie wykonujemy procedurę usuwania i przekazujemy itemData. pozycja. id lub 39 00:02:46,100 --> 00:02:55,000 alternatywnie, przekazując procedurę usuwania w ten sposób, ale użyj bind, aby wstępnie skonfigurować wszystkie argumenty, 40 00:02:55,000 --> 00:03:01,150 które otrzyma ta funkcja. Bind zawsze potrzebuje wartości dla tego słowa kluczowego w funkcji, którą wykona. Tam możemy po prostu przekazać 41 00:03:01,150 --> 00:03:04,170 to, to nie ma znaczenia, ale drugi 42 00:03:04,360 --> 00:03:08,290 argument jest teraz pierwszym argumentem, który otrzyma procedura usuwania, więc 43 00:03:08,620 --> 00:03:15,640 tutaj przekazujemy itemData. pozycja. ID. Teraz upewniamy się, że 44 00:03:15,640 --> 00:03:22,530 możemy wcisnąć „tak” i zadziała, jeśli teraz wrócimy tutaj do administratora, kliknij usuń, naciśnij „tak”, to teraz naprawdę 45 00:03:22,600 --> 00:03:27,700 działa, a jeśli naciśniemy „nie”, nic się nie dzieje, tak to usuwa. 46 00:03:27,700 --> 00:03:29,020 Więc to jest 47 00:03:29,230 --> 00:03:34,450 pierwsza rzecz i aby upewnić się, że cofniemy się, jeśli to zapiszemy, teraz musimy przejść 48 00:03:34,750 --> 00:03:41,680 do ekranu edycji produktu i tam w naszym module obsługi przesyłania, bez względu na to, czy wysyłamy aktualizację, czy tworzymy 49 00:03:41,680 --> 00:03:51,870 akcję produktu, w koniec Chcę także wywołać nawigację rekwizytów wróć, aby wrócić do poprzedniego ekranu. A jeśli teraz to zapiszemy i przejdziemy do ekranu 50 00:03:53,430 --> 00:03:58,920 administratora, a ja teraz przesyłam pusty produkt, oczywiście otrzymuję ostrzeżenie, ale 51 00:04:01,990 --> 00:04:07,750 to na ogół działa, to wraca i jeśli edytuję produkt, to 52 00:04:07,750 --> 00:04:08,890 również działa. 53 00:04:08,950 --> 00:04:13,470 Teraz skończyliśmy z zarządzaniem wszystkimi danymi wejściowymi, a pozostałą rzeczą, którą 54 00:04:13,510 --> 00:04:18,920 chcę teraz zrobić, zanim naprawdę to wszystko zakończę, jest to, że chcę jeszcze bardziej 55 00:04:18,920 --> 00:04:20,850 zoptymalizować produkt i sposób, w 56 00:04:21,040 --> 00:04:26,800 jaki „ ponowne użycie naszej karty wygląda tutaj z cieniem i tak dalej, ponieważ używamy 57 00:04:27,040 --> 00:04:28,270 tego w 58 00:04:28,270 --> 00:04:33,940 wielu komponentach, a jeśli zauważysz, że używasz czegoś w wielu komponentach, zawsze możesz zastanowić 59 00:04:33,940 --> 00:04:35,920 się, czy możesz to bardziej 60 00:04:35,980 --> 00:04:39,370 zoptymalizować i rzeczywiście tutaj , mamy potencjał optymalizacyjny. 61 00:04:39,490 --> 00:04:42,600 Jak jednak możemy to zoptymalizować? 62 00:04:42,720 --> 00:04:48,720 Cóż, moglibyśmy utworzyć osobny komponent tutaj w naszym folderze interfejsu użytkownika folderu 63 00:04:49,080 --> 00:04:55,800 komponentów, który nazywamy koszykiem. js, gdzie właśnie przechowujemy wygląd tego koszyka. W końcu 64 00:04:55,800 --> 00:05:05,140 element wózka może być bardzo prostym elementem. Importujemy React z React tutaj, ponieważ musimy utworzyć komponent i importujemy widok 65 00:05:05,260 --> 00:05:13,990 z React Native, tak po prostu, a teraz tutaj, tworzymy nasz koszyk, w którym po prostu otrzymujemy nasze rekwizyty, zwracamy trochę 66 00:05:14,030 --> 00:05:21,000 jsx i eksportujemy ten komponent do koniec, chociaż będziemy musieli również skonfigurować stylizację, ponieważ to jest podstawowa 67 00:05:21,000 --> 00:05:23,390 idea tego komponentu, chodzi o 68 00:05:23,400 --> 00:05:30,370 to, aby dać nam kilka wstępnie skonfigurowanych stylów. Dodam więc również moje style na stałe do arkusza 69 00:05:30,680 --> 00:05:31,750 stylów. 70 00:05:31,770 --> 00:05:36,710 utwórz tam i teraz, jaki kod jsx chcę tu zwrócić? 71 00:05:36,760 --> 00:05:41,920 Cóż, to widok, widok, który faktycznie zawinie to, co tam przekazujemy, więc 72 00:05:41,950 --> 00:05:46,870 między tagami mojego komponentu, więc po prostu podpiera tam dzieci, ale 73 00:05:46,930 --> 00:05:53,690 teraz ten widok może uzyskać tutaj domyślną stylizację, którą nazwiję koszykiem i która powinna być 74 00:05:53,690 --> 00:05:56,090 stylami, którymi inaczej kopiuję. 75 00:05:56,110 --> 00:06:01,780 Więc tutaj mój styl koszyka w tym koszyku jest dokładnie tym, co tutaj mam, produktem, 76 00:06:01,780 --> 00:06:02,880 tutaj są 77 00:06:02,900 --> 00:06:09,540 te cienie, wysokość, promień obramowania i kolor tła. Możesz to wszystko wyciąć i przenieść do koszyka 78 00:06:09,540 --> 00:06:10,260 tutaj. 79 00:06:11,580 --> 00:06:16,890 Teraz, aby nadal móc to trochę skonfigurować, w rzeczywistości poprawię to 80 00:06:16,890 --> 00:06:27,540 i ustawię styl na obiekt, w którym scalam wartości z koszyka stylów i wszelkie wartości, które otrzymuję w propozycji stylu, takie jak ten. 81 00:06:27,540 --> 00:06:32,970 Możemy teraz ustawić rekwizyt stylu, gdy korzystamy z naszego koszyka i przekażemy 82 00:06:32,970 --> 00:06:39,240 własne style, które zostaną połączone z tymi domyślnymi stylami kart, ponieważ pozwala mi to 83 00:06:39,300 --> 00:06:50,780 na korzystanie z koszyka tutaj w produkcie na przykład poprzez importowanie koszyka z , a teraz jeden poziom wyżej w folderze interfejsu użytkownika, w pliku koszyka 84 00:06:51,000 --> 00:06:52,460 i zastąp 85 00:06:52,500 --> 00:06:54,830 tutaj ten widok, ten widok 86 00:06:54,860 --> 00:07:01,410 zewnętrzny kartą, a zatem oczywiście również zamień tag zamykający i nadal podaj tutaj moje specyfikacje 87 00:07:01,410 --> 00:07:08,360 produktu, więc ta wysokość i margines . 88 00:07:08,360 --> 00:07:11,570 Zostanie to połączone z innym wyglądem karty i wszystko między tagami 89 00:07:11,570 --> 00:07:15,030 otwierającymi i zamykającymi karty będzie po prostu działać, przekazuję to do mojej 90 00:07:15,020 --> 00:07:18,820 karty tutaj za pomocą rekwizytów dzieci. Teraz to samo dla 91 00:07:18,830 --> 00:07:25,280 przedmiotu zamówienia, musimy tylko zaimportować kartę i teraz przejść do folderu interfejsu użytkownika, aby tutaj kartę, 92 00:07:26,240 --> 00:07:29,690 a następnie użyć karty zamiast tego widoku, ten 93 00:07:29,700 --> 00:07:34,570 widok zewnętrzny tutaj, zastąp go kartą i pozbądź się te style kart 94 00:07:34,590 --> 00:07:39,330 tutaj, cienie, elewacja, promień obramowania i kolor tła i zachowują tylko 95 00:07:39,330 --> 00:07:45,640 style specjalne, w których chcesz się połączyć. A teraz ostatnią rzeczą, ostatnim miejscem, w którym możemy to 96 00:07:45,660 --> 00:07:49,440 wykorzystać, jest ekran koszyka, tam też mam moje podsumowanie, które wykorzystuje te style kart. 97 00:07:49,770 --> 00:07:56,870 Cóż, możemy zaimportować komponent karty z folderu składników, folderu UI 98 00:07:56,920 --> 00:08:04,930 tam i tam, z koszyka. plik js, a teraz użyj komponentu karty zamiast widoku 99 00:08:05,320 --> 00:08:07,290 w miejscu, w 100 00:08:07,300 --> 00:08:11,380 którym chcemy tych stylów kart, więc tutaj byłby widok, który 101 00:08:11,380 --> 00:08:16,590 miał style podsumowania, zastąpię to kartą. A poniżej stylów podsumowania zachowujemy wszystko, 102 00:08:16,650 --> 00:08:22,170 co jest specyficzne dla tego ekranu lub tego komponentu, ale możemy pozbyć się koloru 103 00:08:22,170 --> 00:08:27,260 cienia, promienia cienia, wysokości, koloru tła promienia obramowania, które można wszystko usunąć. 104 00:08:27,290 --> 00:08:32,480 Teraz zapiszmy to, a zobaczysz, że oczywiście aplikacja nadal działa i wygląda 105 00:08:32,480 --> 00:08:33,800 tak samo, 106 00:08:34,630 --> 00:08:41,320 jak wcześniej, jeśli dodam to do koszyka na przykład i zamówię to i przejrzę moje zamówienia, 107 00:08:41,320 --> 00:08:48,760 to wszystko wygląda na tak jak wcześniej, ale teraz robi to z odrobiną bardziej optymalnego kodu, w którym 108 00:08:48,760 --> 00:08:53,610 faktycznie ponownie wykorzystujemy nasze style i mamy dla nich osobny komponent 109 00:08:53,650 --> 00:08:59,170 prezentacyjny, dzięki czemu nasze inne komponenty mogą być nieco szczuplejsze i nie powtarzamy 110 00:08:59,170 --> 00:09:05,710 się jako często przy ustawianiu wyglądu tego koszyka. Kolejną zaletą jest to, że nie możemy pomylić się, jeśli 111 00:09:05,710 --> 00:09:11,220 ustawimy promień cienia na 8 w jednym składniku i 10 w innym, wówczas nasza aplikacja może wyglądać nieco niespójnie. 112 00:09:11,260 --> 00:09:17,830 Unikamy tego, mając pewne komponenty skoncentrowane na stylizacji, które konfigurują te podstawowe style, które następnie używamy w 113 00:09:17,830 --> 00:09:20,410 innych komponentach, gdy robimy to tutaj.