Upewnijmy się, że możemy przejść do ekranu szczegółów produktu, tego
ekranu tutaj, a przede wszystkim w komponencie ekranu
szczegółów produktu. Cóż, skonfiguruję komponent, importując React
z React. Następnie prawdopodobnie
potrzebujemy też kilku rzeczy z React Native, na przykład naprawdę
nie zaszkodzi mieć tutaj widok i tekst, a także arkusz stylów i
składnik obrazu, przy okazji kolejności importowania tutaj oczywiście nie ma znaczenia.
Chcę też mieć tam przycisk, ponieważ chcę mieć tutaj także przycisk dodawania do
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
bardzo małym urządzeniu i dlatego zdecydowanie powinna być przewijana, abyśmy zawsze mogli
zobaczyć całą zawartość. W tym miejscu
dodam mój element ekranu szczegółów produktu, ponownie element funkcjonalny, w którym otrzymujemy rekwizyty, skonfiguruję tutaj
mój arkusz stylów z arkuszem stylów. utwórz i zapisz go w stałej stylach
i oczywiście wyeksportuj ekran szczegółów produktu jako domyślny. Dzięki temu zacznijmy od prostego i zwróćmy tutaj widok
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
abyśmy mogli go faktycznie użyć, ponieważ musimy zwrócić
jsx do mieć prawidłowy komponent, ponieważ pierwszą rzeczą, którą chcę zrobić, jest dostosowanie
nawigacji i do tego w ShopNavigator. Plik js w folderze nawigacyjnym,
możemy zaimportować tutaj ekran szczegółów
produktu z naszego folderu ekranów, folderu sklepu, a tam ekran szczegółów produktu, więc to jest plik, nad
którym
właśnie pracowaliśmy, i mapujemy go tutaj na identyfikator, ja ' Nazwiję to tutaj
szczegóły produktu.
Te klawisze, jak nauczyłeś się w sekcji nawigacji, zawsze zależą od
ciebie, więc teraz zmapowaliśmy ten ekran.
To będzie nasz ekran początkowy, ponieważ jest to
pierwsza para klucz-wartość, to jest ekran, do którego możemy przejść, możemy nawigować do
i tam, musimy przejść do ekranu przeglądu naszych produktów i kiedy klikamy na widok szczegół, jest to
w końcu sygnał, że chcemy przejść do ekranu szczegółów tego produktu.
Więc tutaj, w tej funkcji, możemy wywołać rekwizyty nawigacja nawigacja, ta funkcja nawigacyjna, o której dowiedziałeś się
w sekcji nawigacyjnej, a następnie pokazałem
ci jedną składnię, w której przekazujesz obiekt JavaScript, w którym
ustawiłeś nazwę trasy, która mogłaby podaj szczegóły produktu, a to zabierze Cię do ekranu.
Teraz zapisujemy to i
klikamy na szczegóły, w rzeczywistości przechodzimy do ekranu szczegółów produktu. Teraz jako adnotacja w sekcji nawigacji pokazałem ci oczywiście,
że alternatywną składnią jest to, że podajesz nazwę ekranu jako pierwszy argument do nawigacji, więc możesz
to również zrobić
i to będzie działać jako dobrze. Jeśli przetestujemy to również
na Androidzie, możemy się tam dostać.
Teraz oczywiście nie chodzi tylko o to, aby tam pojechać, ale także o przekazanie naszych danych lub naszego identyfikatora produktu przynajmniej,
abyśmy mogli załadować dane produktu do komponentu. Dlatego jako drugi argument tutaj przekazuję obiekt
JavaScript, który będzie moimi parametrami dla tej akcji nawigacyjnej i tam możesz
mieć dowolne pary klucz-wartość, tutaj dodam pole identyfikatora produktu, znowu ta nazwa jest całkowicie ale
to będzie itemData. pozycja. id, ponieważ itemData. pozycja wskazuje na
pojedynczy produkt, który wygląda tak, jakbyśmy ustawili go tutaj w modelach i ma identyfikator ID, więc oczywiście
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
wyodrębnić, to jest również coś, czego nauczyłeś się wcześniej i którego możesz po prostu ćwiczyć tutaj.
Możemy uzyskać tutaj nasz identyfikator produktu, po prostu wywołując rekwizyty nawigacyjne, pobierz identyfikator produktu param, a
to wyodrębni nasz identyfikator produktu z otrzymanych parametrów.
Teraz możemy użyć tego identyfikatora, aby uzyskać nasz produkt i oczywiście nasze produkty są przechowywane w Redux.
Więc w końcu musimy zaimportować tutaj selektor użycia z React Redux, abyśmy mogli go użyć do wybrania jednego
produktu, powiedzmy,
że wybrany produkt, ta stała nazwa oczywiście zależy od ciebie, teraz jest wybierana za pomocą selektora
użytkowania, który odbiera nasz stan, nasz stan Redux, a następnie możemy wiercić w plasterku produktów,
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
do wszystkich dostępnych produktów oprócz oczywiście tutaj nie
chcę ładować wszystkich dostępnych produktów, ale zamiast tego mogę użyć metody
find, aby znaleźć pojedynczy produkt z tą funkcją, którą przekazuję, aby znaleźć, która działa na każdym elemencie w tablicy,
w której otrzymujemy produkt, w którym ta funkcja zwraca true i powinien zwracać true, jeśli
identyfikator produktu, na który patrzę, jest równy identyfikatorowi produktu, który wyodrębniłem z parametrów trasy.
W ten sposób wybieramy pojedynczy produkt, a ten pojedynczy produkt może być następnie użyty
tutaj, więc tutaj moglibyśmy wydrukować wybrany produkt. tytuł na przykład. Jeśli teraz to zachowamy i zobaczymy szczegóły, rzeczywiście
tutaj widzę
czerwoną koszulę, jeśli zrobię to dla niebieskiego dywanu, widzę tutaj niebieski
dywan, więc to działa. Byłoby miło widzieć,
że w
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
byłoby ustawić nasz
tytuł za pomocą set param i użyć go tutaj w opcjach nawigacji, które musimy dodać do szczegółów
produktów, aby go wyodrębnić lub trochę łatwiej, przechodzimy do przeglądu produktu, gdzie przechodzimy na
tę stronę, i oprócz przekazania identyfikatora produktu, przekazujemy również tytuł produktu, ponieważ
tutaj mamy to łatwo dostępne i otrzymujemy je za pomocą
itemData. pozycja. tytuł.
Teraz ustawiliśmy również ten parametr, a to sprawia, że bardzo łatwo jest
go wyodrębnić na ekranie szczegółów produktu, tam w opcjach nawigacji możemy teraz dodać
opcje nawigacji ekranu szczegółów produktu, a to jest teraz funkcjonalna forma, ponieważ musimy wyodrębnić to
w dynamiczny sposób z naszych parametrów trasy. Mamy więc ten obiekt danych nawigacyjnych, który
ma również rekwizyt nawigacyjny, musimy zwrócić nasz obiekt JavaScript, nasz obiekt konfiguracji opcji nawigacyjnych tutaj, powinny to być
oczywiście opcje, a tam możemy ustawić tytuł nagłówka na navData. nawigacja. tytuł produktu getParam lub cokolwiek, co
wybierzesz jako identyfikator tego.
Więc tutaj używam tytułu produktu, ponieważ na ekranie przeglądu produktu ustawiam ten tytuł na tytuł produktu.
Dzięki temu ustawiamy ten nagłówek, zobaczmy, czy to działa, jeśli spróbujemy przejść do tego ekranu,
to wygląda
dobrze, teraz widzimy również tytuł produktu tutaj w nagłówku. To działa.
Teraz wspomniałem wcześniej, że powinniśmy nie tylko być w stanie tam przejść,
naciskając szczegóły widoku, ale może
także ogólnie naciskając produkt, a do tego możemy przejść do produktu i oczywiście mamy
przycisk widoku szczegółów, ale teraz możemy owinąć cały
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,
te przyciski nadal będą uruchamiane osobno, ale teraz
możemy również nacisnąć gdziekolwiek indziej i tutaj, naciśnij przycisk, teraz chcę
również
wyzwolić to samo, przycisk Szczegóły widoku, chcę uruchomić funkcję, którą otrzymujemy w widoku szczegółów,
więc po prostu przekażę to do widoku szczegółów. I dzięki tej prostej zmianie możemy nacisnąć
dowolne miejsce na tym elemencie, aby przejść do ekranu szczegółów, także na Androidzie, gdzie wygląda
to jednak trochę brzydko i ogólnie fajnie byłoby mieć ten efekt falowania.
Teraz, gdy nauczyłeś się, jak to
zaimplementować, musimy zaimportować dotykową natywną informację zwrotną na ten temat i interfejs API platformy, więc ten obiekt
platformy, a teraz tutaj w pozycji produktu, możemy skonfigurować nasz dotykowy element tutaj lub jakkolwiek chcesz go nazwać
, powinien jednak mieć postać wielkiej litery, abyśmy mogli go używać jako
elementu jsx, co
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
21, co jest wersją Androida musimy wesprzeć
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
cmp,
więc z tą zmienną, która zawiera dwa różne
rodzaje komponentów w zależności od tego, gdzie działa i teraz, jeśli zrób to,
nadal mamy tutaj efekt krycia, ale mamy efekt tętnienia na Androidzie.
Jednak tylko na dole, nie na zdjęciu, a także nie szanując naszych zaokrąglonych rogów, jak być może
widać.
Teraz, aby rozwiązać problem,
który nie pojawia się na obrazie, wystarczy, że
musimy tam zmienić konfigurację, wystarczy dodać tutaj propozycję użycia pierwszego planu.
Teraz w przypadku dotykowego krycia nie będzie to miało wpływu, ale na dotykowe natywne
sprzężenie zwrotne zapewni to, że efekt marszczenia nie będzie dotyczył tła, ale faktycznie
pierwszego planu, co oznacza również elementy, które są umieszczone na naszym dotykowym lub wewnątrz nasz dotykalny element.
Dlatego teraz jest to również widoczne na zdjęciu i aby uszanować narożniki, zaokrąglone
rogi, zrobię to trochę
inaczej, dodam dotykalny element wewnątrz mojego widoku otoczenia zamiast na zewnątrz, tak i
teraz tutaj dodam przepełnienie ukryte w tym stylu produktu, który jest w tym widoku, który jest
teraz wokół mojego dotykowego komponentu. Z tym jednak, mój cień jest zgubiony, jak
możesz powiedzieć, a teraz mam nawet błąd, że potrzebuję jednego dziecka React. Dlatego poprawmy to trochę i dodajmy
tutaj dodatkowy widok, dodatkowy widok, który otacza wszystko, cały mój dotykalny
element wewnątrz tego zewnętrznego widoku i na tym dodatkowym widoku dodam styl styków dotykalnych lub cokolwiek innego chcesz
to nazwać, a ten dotykalny styl jest teraz dodany tutaj w moim arkuszu stylów.
Teraz dostaje się ukryty
rekwizyt przelewu, więc dodajemy to tutaj, a teraz otrzymujemy również ten sam promień obramowania, który mamy na
całym wózku, więc promień obramowania wynosi tutaj 10, a teraz upewni się, że zachowamy nasz cień, aby nadal działa, ponieważ
ukryty przelew zostałby przycięty, a teraz, aby pozbyć się również tego innego
błędu, możemy po prostu owinąć jeszcze jeden widok wokół całej zawartości elementu dotykowego, abyśmy spełnili
kryteria posiadania tylko jednego elementu potomnego w komponencie dotykowym, a teraz dzięki temu mamy
takie samo zachowanie jak wcześniej na iOS. Nawiasem mówiąc, koszyk nie uruchamia tej
szczegółowej nawigacji, która jest dobra, a na Androidzie mamy
teraz również efekt marszczenia, który szanuje nasze zaokrąglone rogi, który prowadzi nas
do widoku szczegółów, a koszyk również nie robi tego, czego nie powinien .
Dzięki temu, teraz mamy nawigację, której potrzebujemy,
mamy wygląd, którego potrzebujemy tutaj.
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
powinna.