1 00:00:02,220 --> 00:00:06,510 Upewnijmy się, że możemy przejść do ekranu szczegółów produktu, tego 2 00:00:06,510 --> 00:00:09,870 ekranu tutaj, a przede wszystkim w komponencie ekranu 3 00:00:09,870 --> 00:00:13,170 szczegółów produktu. Cóż, skonfiguruję komponent, importując React 4 00:00:13,170 --> 00:00:15,590 z React. Następnie prawdopodobnie 5 00:00:15,620 --> 00:00:21,150 potrzebujemy też kilku rzeczy z React Native, na przykład naprawdę 6 00:00:21,210 --> 00:00:26,940 nie zaszkodzi mieć tutaj widok i tekst, a także arkusz stylów i 7 00:00:27,150 --> 00:00:32,880 składnik obrazu, przy okazji kolejności importowania tutaj oczywiście nie ma znaczenia. 8 00:00:32,890 --> 00:00:38,430 Chcę też mieć tam przycisk, ponieważ chcę mieć tutaj także przycisk dodawania do 9 00:00:38,610 --> 00:00:47,250 koszyka, a także widok przewijania, ponieważ ta strona ze szczegółami może mieć bardzo długi opis produktu lub być wyświetlana na 10 00:00:47,250 --> 00:00:52,440 bardzo małym urządzeniu i dlatego zdecydowanie powinna być przewijana, abyśmy zawsze mogli 11 00:00:52,440 --> 00:00:55,950 zobaczyć całą zawartość. W tym miejscu 12 00:00:55,950 --> 00:01:03,940 dodam mój element ekranu szczegółów produktu, ponownie element funkcjonalny, w którym otrzymujemy rekwizyty, skonfiguruję tutaj 13 00:01:04,210 --> 00:01:10,420 mój arkusz stylów z arkuszem stylów. utwórz i zapisz go w stałej stylach 14 00:01:10,420 --> 00:01:17,440 i oczywiście wyeksportuj ekran szczegółów produktu jako domyślny. Dzięki temu zacznijmy od prostego i zwróćmy tutaj widok 15 00:01:17,500 --> 00:01:26,340 z tekstem, na którym mówimy o ekranie szczegółowym produktu, który jest właśnie tam, abyśmy mogli zobaczyć, że udało nam się tam nawigować i 16 00:01:26,340 --> 00:01:29,570 abyśmy mogli go faktycznie użyć, ponieważ musimy zwrócić 17 00:01:29,610 --> 00:01:34,500 jsx do mieć prawidłowy komponent, ponieważ pierwszą rzeczą, którą chcę zrobić, jest dostosowanie 18 00:01:34,500 --> 00:01:39,750 nawigacji i do tego w ShopNavigator. Plik js w folderze nawigacyjnym, 19 00:01:39,750 --> 00:01:42,290 możemy zaimportować tutaj ekran szczegółów 20 00:01:42,420 --> 00:01:51,020 produktu z naszego folderu ekranów, folderu sklepu, a tam ekran szczegółów produktu, więc to jest plik, nad 21 00:01:51,020 --> 00:01:51,760 którym 22 00:01:51,770 --> 00:01:58,750 właśnie pracowaliśmy, i mapujemy go tutaj na identyfikator, ja ' Nazwiję to tutaj 23 00:01:58,750 --> 00:01:59,830 szczegóły produktu. 24 00:01:59,830 --> 00:02:03,640 Te klawisze, jak nauczyłeś się w sekcji nawigacji, zawsze zależą od 25 00:02:03,640 --> 00:02:06,070 ciebie, więc teraz zmapowaliśmy ten ekran. 26 00:02:06,220 --> 00:02:09,570 To będzie nasz ekran początkowy, ponieważ jest to 27 00:02:09,580 --> 00:02:14,170 pierwsza para klucz-wartość, to jest ekran, do którego możemy przejść, możemy nawigować do 28 00:02:14,170 --> 00:02:20,440 i tam, musimy przejść do ekranu przeglądu naszych produktów i kiedy klikamy na widok szczegół, jest to 29 00:02:20,440 --> 00:02:24,700 w końcu sygnał, że chcemy przejść do ekranu szczegółów tego produktu. 30 00:02:24,700 --> 00:02:32,140 Więc tutaj, w tej funkcji, możemy wywołać rekwizyty nawigacja nawigacja, ta funkcja nawigacyjna, o której dowiedziałeś się 31 00:02:32,140 --> 00:02:35,260 w sekcji nawigacyjnej, a następnie pokazałem 32 00:02:35,320 --> 00:02:40,170 ci jedną składnię, w której przekazujesz obiekt JavaScript, w którym 33 00:02:40,180 --> 00:02:46,340 ustawiłeś nazwę trasy, która mogłaby podaj szczegóły produktu, a to zabierze Cię do ekranu. 34 00:02:46,340 --> 00:02:47,920 Teraz zapisujemy to i 35 00:02:47,930 --> 00:02:55,430 klikamy na szczegóły, w rzeczywistości przechodzimy do ekranu szczegółów produktu. Teraz jako adnotacja w sekcji nawigacji pokazałem ci oczywiście, 36 00:02:55,430 --> 00:03:02,270 że alternatywną składnią jest to, że podajesz nazwę ekranu jako pierwszy argument do nawigacji, więc możesz 37 00:03:02,270 --> 00:03:03,970 to również zrobić 38 00:03:03,980 --> 00:03:09,080 i to będzie działać jako dobrze. Jeśli przetestujemy to również 39 00:03:09,080 --> 00:03:11,750 na Androidzie, możemy się tam dostać. 40 00:03:11,940 --> 00:03:19,410 Teraz oczywiście nie chodzi tylko o to, aby tam pojechać, ale także o przekazanie naszych danych lub naszego identyfikatora produktu przynajmniej, 41 00:03:19,410 --> 00:03:25,200 abyśmy mogli załadować dane produktu do komponentu. Dlatego jako drugi argument tutaj przekazuję obiekt 42 00:03:25,710 --> 00:03:30,380 JavaScript, który będzie moimi parametrami dla tej akcji nawigacyjnej i tam możesz 43 00:03:30,510 --> 00:03:36,060 mieć dowolne pary klucz-wartość, tutaj dodam pole identyfikatora produktu, znowu ta nazwa jest całkowicie ale 44 00:03:36,090 --> 00:03:42,120 to będzie itemData. pozycja. id, ponieważ itemData. pozycja wskazuje na 45 00:03:42,120 --> 00:03:48,480 pojedynczy produkt, który wygląda tak, jakbyśmy ustawili go tutaj w modelach i ma identyfikator ID, więc oczywiście 46 00:03:48,480 --> 00:03:55,350 możemy uzyskać do niego dostęp tutaj i przesłać go dalej. Dzięki temu na ekranie szczegółów produktu możemy to oczywiście 47 00:03:55,380 --> 00:04:01,410 wyodrębnić, to jest również coś, czego nauczyłeś się wcześniej i którego możesz po prostu ćwiczyć tutaj. 48 00:04:01,410 --> 00:04:11,880 Możemy uzyskać tutaj nasz identyfikator produktu, po prostu wywołując rekwizyty nawigacyjne, pobierz identyfikator produktu param, a 49 00:04:11,880 --> 00:04:17,160 to wyodrębni nasz identyfikator produktu z otrzymanych parametrów. 50 00:04:17,180 --> 00:04:22,580 Teraz możemy użyć tego identyfikatora, aby uzyskać nasz produkt i oczywiście nasze produkty są przechowywane w Redux. 51 00:04:22,640 --> 00:04:29,510 Więc w końcu musimy zaimportować tutaj selektor użycia z React Redux, abyśmy mogli go użyć do wybrania jednego 52 00:04:29,510 --> 00:04:30,830 produktu, powiedzmy, 53 00:04:30,830 --> 00:04:37,220 że wybrany produkt, ta stała nazwa oczywiście zależy od ciebie, teraz jest wybierana za pomocą selektora 54 00:04:37,220 --> 00:04:43,010 użytkowania, który odbiera nasz stan, nasz stan Redux, a następnie możemy wiercić w plasterku produktów, 55 00:04:43,070 --> 00:04:51,420 znowu ta nazwa plasterka jest tym, czego używasz tutaj w połączonych produktach redukujących w moim przypadku i tam możemy uzyskać dostęp 56 00:04:51,470 --> 00:04:54,650 do wszystkich dostępnych produktów oprócz oczywiście tutaj nie 57 00:04:54,680 --> 00:04:59,230 chcę ładować wszystkich dostępnych produktów, ale zamiast tego mogę użyć metody 58 00:04:59,240 --> 00:05:06,650 find, aby znaleźć pojedynczy produkt z tą funkcją, którą przekazuję, aby znaleźć, która działa na każdym elemencie w tablicy, 59 00:05:06,650 --> 00:05:12,560 w której otrzymujemy produkt, w którym ta funkcja zwraca true i powinien zwracać true, jeśli 60 00:05:12,560 --> 00:05:18,290 identyfikator produktu, na który patrzę, jest równy identyfikatorowi produktu, który wyodrębniłem z parametrów trasy. 61 00:05:18,290 --> 00:05:23,470 W ten sposób wybieramy pojedynczy produkt, a ten pojedynczy produkt może być następnie użyty 62 00:05:23,470 --> 00:05:32,930 tutaj, więc tutaj moglibyśmy wydrukować wybrany produkt. tytuł na przykład. Jeśli teraz to zachowamy i zobaczymy szczegóły, rzeczywiście 63 00:05:32,930 --> 00:05:33,860 tutaj widzę 64 00:05:33,860 --> 00:05:37,970 czerwoną koszulę, jeśli zrobię to dla niebieskiego dywanu, widzę tutaj niebieski 65 00:05:37,970 --> 00:05:41,590 dywan, więc to działa. Byłoby miło widzieć, 66 00:05:41,720 --> 00:05:43,110 że w 67 00:05:43,280 --> 00:05:53,810 nagłówku również są dwie opcje, możemy teraz użyć rekwizytów. nawigacja ustaw param tutaj, a także zawiń to w wywołaniu efektu użycia, lepiej 68 00:05:53,810 --> 00:05:55,030 byłoby ustawić nasz 69 00:05:55,030 --> 00:06:01,880 tytuł za pomocą set param i użyć go tutaj w opcjach nawigacji, które musimy dodać do szczegółów 70 00:06:01,880 --> 00:06:07,690 produktów, aby go wyodrębnić lub trochę łatwiej, przechodzimy do przeglądu produktu, gdzie przechodzimy na 71 00:06:07,700 --> 00:06:12,710 tę stronę, i oprócz przekazania identyfikatora produktu, przekazujemy również tytuł produktu, ponieważ 72 00:06:12,710 --> 00:06:17,000 tutaj mamy to łatwo dostępne i otrzymujemy je za pomocą 73 00:06:17,000 --> 00:06:20,120 itemData. pozycja. tytuł. 74 00:06:20,150 --> 00:06:25,400 Teraz ustawiliśmy również ten parametr, a to sprawia, że bardzo łatwo jest 75 00:06:25,820 --> 00:06:31,490 go wyodrębnić na ekranie szczegółów produktu, tam w opcjach nawigacji możemy teraz dodać 76 00:06:33,930 --> 00:06:40,440 opcje nawigacji ekranu szczegółów produktu, a to jest teraz funkcjonalna forma, ponieważ musimy wyodrębnić to 77 00:06:41,730 --> 00:06:48,390 w dynamiczny sposób z naszych parametrów trasy. Mamy więc ten obiekt danych nawigacyjnych, który 78 00:06:48,420 --> 00:06:55,590 ma również rekwizyt nawigacyjny, musimy zwrócić nasz obiekt JavaScript, nasz obiekt konfiguracji opcji nawigacyjnych tutaj, powinny to być 79 00:06:55,620 --> 00:07:07,770 oczywiście opcje, a tam możemy ustawić tytuł nagłówka na navData. nawigacja. tytuł produktu getParam lub cokolwiek, co 80 00:07:07,830 --> 00:07:11,170 wybierzesz jako identyfikator tego. 81 00:07:11,190 --> 00:07:17,060 Więc tutaj używam tytułu produktu, ponieważ na ekranie przeglądu produktu ustawiam ten tytuł na tytuł produktu. 82 00:07:19,600 --> 00:07:25,600 Dzięki temu ustawiamy ten nagłówek, zobaczmy, czy to działa, jeśli spróbujemy przejść do tego ekranu, 83 00:07:25,900 --> 00:07:27,130 to wygląda 84 00:07:27,130 --> 00:07:34,560 dobrze, teraz widzimy również tytuł produktu tutaj w nagłówku. To działa. 85 00:07:34,560 --> 00:07:39,420 Teraz wspomniałem wcześniej, że powinniśmy nie tylko być w stanie tam przejść, 86 00:07:39,420 --> 00:07:41,840 naciskając szczegóły widoku, ale może 87 00:07:42,170 --> 00:07:47,930 także ogólnie naciskając produkt, a do tego możemy przejść do produktu i oczywiście mamy 88 00:07:47,930 --> 00:07:51,310 przycisk widoku szczegółów, ale teraz możemy owinąć cały 89 00:07:51,440 --> 00:08:01,000 przedmiot w dotykalny i tam możemy użyć dotykalnego krycia i owinąć ten cały przedmiot dotykowym kryciem, więc zawiń to wokół naszego całego widoku, 90 00:08:01,160 --> 00:08:04,430 te przyciski nadal będą uruchamiane osobno, ale teraz 91 00:08:04,430 --> 00:08:09,110 możemy również nacisnąć gdziekolwiek indziej i tutaj, naciśnij przycisk, teraz chcę 92 00:08:09,130 --> 00:08:09,900 również 93 00:08:09,920 --> 00:08:15,710 wyzwolić to samo, przycisk Szczegóły widoku, chcę uruchomić funkcję, którą otrzymujemy w widoku szczegółów, 94 00:08:15,740 --> 00:08:22,730 więc po prostu przekażę to do widoku szczegółów. I dzięki tej prostej zmianie możemy nacisnąć 95 00:08:22,730 --> 00:08:28,970 dowolne miejsce na tym elemencie, aby przejść do ekranu szczegółów, także na Androidzie, gdzie wygląda 96 00:08:28,970 --> 00:08:34,080 to jednak trochę brzydko i ogólnie fajnie byłoby mieć ten efekt falowania. 97 00:08:34,220 --> 00:08:36,980 Teraz, gdy nauczyłeś się, jak to 98 00:08:37,070 --> 00:08:44,760 zaimplementować, musimy zaimportować dotykową natywną informację zwrotną na ten temat i interfejs API platformy, więc ten obiekt 99 00:08:44,760 --> 00:08:52,980 platformy, a teraz tutaj w pozycji produktu, możemy skonfigurować nasz dotykowy element tutaj lub jakkolwiek chcesz go nazwać 100 00:08:52,980 --> 00:08:58,650 , powinien jednak mieć postać wielkiej litery, abyśmy mogli go używać jako 101 00:08:58,660 --> 00:09:00,710 elementu jsx, co 102 00:09:00,720 --> 00:09:10,050 domyślnie wskazuje na dotykową nieprzezroczystość, powiedzmy, ale jeśli system operacyjny platformy jest równy Androidowi, a wersja platformy jest większa lub równa 103 00:09:10,050 --> 00:09:13,240 21, co jest wersją Androida musimy wesprzeć 104 00:09:13,440 --> 00:09:22,410 efekt tętnienia, możemy ustawić dotykowe cmp równe dotykowemu natywnemu sprzężeniu zwrotnemu, a teraz możemy zastąpić dotykalne nieprzezroczystość w dół dotykowym 105 00:09:22,410 --> 00:09:23,100 cmp, 106 00:09:24,210 --> 00:09:28,120 więc z tą zmienną, która zawiera dwa różne 107 00:09:28,220 --> 00:09:34,040 rodzaje komponentów w zależności od tego, gdzie działa i teraz, jeśli zrób to, 108 00:09:34,850 --> 00:09:40,330 nadal mamy tutaj efekt krycia, ale mamy efekt tętnienia na Androidzie. 109 00:09:40,340 --> 00:09:48,980 Jednak tylko na dole, nie na zdjęciu, a także nie szanując naszych zaokrąglonych rogów, jak być może 110 00:09:48,980 --> 00:09:49,930 widać. 111 00:09:50,390 --> 00:09:52,770 Teraz, aby rozwiązać problem, 112 00:09:52,850 --> 00:09:56,500 który nie pojawia się na obrazie, wystarczy, że 113 00:09:56,690 --> 00:10:01,990 musimy tam zmienić konfigurację, wystarczy dodać tutaj propozycję użycia pierwszego planu. 114 00:10:02,050 --> 00:10:07,570 Teraz w przypadku dotykowego krycia nie będzie to miało wpływu, ale na dotykowe natywne 115 00:10:07,570 --> 00:10:12,850 sprzężenie zwrotne zapewni to, że efekt marszczenia nie będzie dotyczył tła, ale faktycznie 116 00:10:12,910 --> 00:10:19,180 pierwszego planu, co oznacza również elementy, które są umieszczone na naszym dotykowym lub wewnątrz nasz dotykalny element. 117 00:10:19,180 --> 00:10:25,360 Dlatego teraz jest to również widoczne na zdjęciu i aby uszanować narożniki, zaokrąglone 118 00:10:25,360 --> 00:10:27,560 rogi, zrobię to trochę 119 00:10:27,670 --> 00:10:33,840 inaczej, dodam dotykalny element wewnątrz mojego widoku otoczenia zamiast na zewnątrz, tak i 120 00:10:35,550 --> 00:10:42,860 teraz tutaj dodam przepełnienie ukryte w tym stylu produktu, który jest w tym widoku, który jest 121 00:10:42,870 --> 00:10:48,260 teraz wokół mojego dotykowego komponentu. Z tym jednak, mój cień jest zgubiony, jak 122 00:10:48,260 --> 00:10:55,710 możesz powiedzieć, a teraz mam nawet błąd, że potrzebuję jednego dziecka React. Dlatego poprawmy to trochę i dodajmy 123 00:10:55,710 --> 00:11:01,590 tutaj dodatkowy widok, dodatkowy widok, który otacza wszystko, cały mój dotykalny 124 00:11:01,590 --> 00:11:11,370 element wewnątrz tego zewnętrznego widoku i na tym dodatkowym widoku dodam styl styków dotykalnych lub cokolwiek innego chcesz 125 00:11:11,370 --> 00:11:19,090 to nazwać, a ten dotykalny styl jest teraz dodany tutaj w moim arkuszu stylów. 126 00:11:19,180 --> 00:11:21,260 Teraz dostaje się ukryty 127 00:11:21,370 --> 00:11:28,090 rekwizyt przelewu, więc dodajemy to tutaj, a teraz otrzymujemy również ten sam promień obramowania, który mamy na 128 00:11:28,090 --> 00:11:36,000 całym wózku, więc promień obramowania wynosi tutaj 10, a teraz upewni się, że zachowamy nasz cień, aby nadal działa, ponieważ 129 00:11:36,000 --> 00:11:41,220 ukryty przelew zostałby przycięty, a teraz, aby pozbyć się również tego innego 130 00:11:41,220 --> 00:11:47,230 błędu, możemy po prostu owinąć jeszcze jeden widok wokół całej zawartości elementu dotykowego, abyśmy spełnili 131 00:11:47,240 --> 00:11:52,890 kryteria posiadania tylko jednego elementu potomnego w komponencie dotykowym, a teraz dzięki temu mamy 132 00:11:52,890 --> 00:11:58,620 takie samo zachowanie jak wcześniej na iOS. Nawiasem mówiąc, koszyk nie uruchamia tej 133 00:11:58,620 --> 00:12:01,940 szczegółowej nawigacji, która jest dobra, a na Androidzie mamy 134 00:12:02,070 --> 00:12:06,780 teraz również efekt marszczenia, który szanuje nasze zaokrąglone rogi, który prowadzi nas 135 00:12:07,050 --> 00:12:12,270 do widoku szczegółów, a koszyk również nie robi tego, czego nie powinien . 136 00:12:12,270 --> 00:12:15,050 Dzięki temu, teraz mamy nawigację, której potrzebujemy, 137 00:12:15,060 --> 00:12:17,210 mamy wygląd, którego potrzebujemy tutaj. 138 00:12:17,490 --> 00:12:23,490 Teraz możemy przejść do strony szczegółów i powinniśmy być może upewnić się, że ta strona szczegółów również wygląda tak, jak 139 00:12:23,490 --> 00:12:24,020 powinna.