Tak więc na ekranie listy miejsc chcę wypisać listę miejsc, co nie jest zaskakujące, a do tego znasz
jeden komponent z React Native, który możemy
zaimportować i to jest płaska lista. Płaska lista jest oczywiście idealna
do tworzenia listy.
Więc tutaj wrócę teraz płaską listę
i chcę uzyskać dostęp do moich miejsc.
Są one przechowywane w Redux,
dzięki czemu możemy lub przy pomocy Redux, więc możemy zaimportować React Redux tutaj, a ściślej, z tego pakietu, importujemy
selektor użycia, ponieważ teraz w naszym składniku możemy użyć tego, aby uzyskać dostęp do danych przechowywane w Redux.
Więc tutaj chcę uzyskać dostęp do moich miejsc za
pomocą selektora użycia, to pestka, przekazujemy tę funkcję, która odbiera nasz sklep Redux,
nasz stan Redux przechowywany w sklepie tam i tam Chcę uzyskać dostęp na plasterki miejsc
i tutaj używam miejsc, ponieważ w aplikacji. js, użyłem tutaj miejsc jako identyfikatora, który przenosi nas do wycinka zarządzanego za
pomocą reduktora miejsc, aw tym reduktorze mamy inny klucz miejsc, więc
w końcu tutaj chcę uzyskać dostęp do stanu. miejsca. miejsca i dzięki temu wiemy,
jakiego rodzaju dane chcemy wprowadzić do płaskiej listy.
Teraz ponownie dodam tutaj ekstraktor kluczy, aby poinformować płaską listę, gdzie znaleźć unikalny identyfikator dla każdego elementu
i dla mnie, który jest własnością identyfikatora każdego miejsca
i oczywiście musimy dodać element renderowania, aby uzyskać nasze dane danych pozycji, a następnie wyprowadza
komponent dla każdego elementu, który chcemy wyprowadzić.
W tym celu utworzę nowy komponent w folderze komponentów i
to jest PlaceItem. plik js. Teraz, aby zaoszczędzić trochę czasu, podłączyłem swój PlaceItem. Prześlij plik do tego wykładu i możesz
po prostu zastąpić swoją lub swoją treścią moją, ale oczywiście przeprowadzę cię przez to, co
tam robię.
Jest to podstawowy komponent, ponieważ budowaliśmy go również wiele razy w tym kursie, po prostu mam
tutaj swój własny komponent, który jest w stanie wyprowadzić obraz, ponieważ będziemy go potrzebować później, który następnie
będzie miał widok z dwoma fragmentami tekstu, który będzie usiądź
obok tego obrazu, dzięki stylizacji, którą tam zastosowałem. Podaję tytuł i adres tego miejsca, oczywiście,
że informacji, których jeszcze nie mamy, ale dodamy to w tym module i mamy
dookoła dotykalny komponent nieprzezroczystości, abyśmy mogli naciskać każde miejsce i kiedy wciskamy go, uruchamiamy
funkcję, którą spodziewamy się uzyskać na wybranej prop.
Teraz w mojej stylizacji ustawiłem to tak, aby obraz i ten blok tekstowy siedziały
obok siebie w rzędzie tutaj z rzędem kierunku wygięcia, obraz jest wtedy zaokrąglonym obrazem, więc jest to
zaokrąglony obraz, to koło z pełny kolor tła w przypadku, gdy nie mamy jeszcze obrazu, który oczywiście możesz
również zmienić na na przykład ten szarawy kolor. Następnie mamy pojemnik informacyjny, który jest pojemnikiem
zawierającym dwa fragmenty tekstu, które są teraz ułożone w kolumnie nad sobą, a
następnie mamy tytuł, który jest nieco większy niż adres i tam, w
rzeczywistości również chcę użyć czarny jako kolor tekstu. Takiego ustawienia użyję tutaj i jest to
element miejsca, który możemy teraz zaimportować
na ekran listy miejsc, abyśmy mogli zaimportować element miejsca z komponentów, umieścić element i wyprowadzić go tutaj w postaci elementów renderowanych.
Więc chcę wyprowadzić element umieszczający jako samozamykający się element, a teraz umieść element, ten nowy
element potrzebuje pewnych danych wejściowych. Musimy przekazać wybraną prop, która wskazuje
na funkcję, która powinna zostać wykonana po dotknięciu ikony. Musimy przekazać rekwizyt obrazkowy, rekwizyt tytułowy i adresowy, a więc
cztery rekwizyty, które należy podać. Zróbmy to tutaj. Dla obrazu nie mamy jeszcze
obrazu, więc tutaj przejdę na chwilę do zera. W przypadku tytułu możemy to zrobić, oczywiście,
możemy wskazać na itemData. pozycja. tytuł, ponieważ pojedynczy element jest tylko elementem zgodnym z
naszym modelem miejsca i oczywiście ma on tytuł tytułowy, więc możemy bezpiecznie uzyskać do niego dostęp. W przypadku adresu jeszcze tego nie mamy, więc
ustawię to
na null, a
dla select, oczywiście możemy to
ustawić, tam w
końcu chcę przejść do nowej strony. Więc możemy to zrobić za pomocą anonimowej funkcji wbudowanej tutaj lub
za pomocą funkcji nazwanej przechowywanej w osobnej
stałej, cokolwiek chcesz,
zrobię to inline i tam będę mógł użyć rekwizytów. nawigacja. nawiguj i przejdź do ekranu szczegółów miejsca
z identyfikatorem szczegółów miejsca, który oczywiście w moim nawigatorze jest tym identyfikatorem tu i
tam
Chcę również przekazać dodatkowe dane, jakieś parametry, więc przekażę drugi argument, aby nawigować i tam to dwie informacje, które
chcę przekazać, to tytuł miejsca i
oczywiście jest to itemData. pozycja. tytuł, więc dokładnie
ta sama rzecz, którą karmię tutaj w tytule prop, a także
identyfikator miejsca, którym jest itemData. pozycja. id i już
mamy ten identyfikator, więc to
już coś generujemy, gdy dodajemy nowe miejsce. Dzięki temu mamy przedmiot miejsca, który przenosi
nas do ekranu szczegółów miejsca, a ponieważ mamy już podstawowy szkielet na tym
ekranie, powinniśmy to zobaczyć.
Jedną rzeczą, którą dodam do ekranu szczegółów miejsca, jest jednak konfiguracja opcji nawigacji, w której
potrzebuję tej funkcji dynamicznej, która następnie zwraca obiekt konfiguracji, ponieważ tam chcę ustawić tytuł nagłówka na
podstawie parametrów, które otrzymuję, ponieważ na liście miejsc screen, przekazuję tytuł miejsca i parametr
identyfikatora miejsca do tego nowego ekranu. Umieść tytuł to, co chcę wyodrębnić i ustawić tutaj
w nagłówku,
dzięki czemu mogę ustawić tytuł nagłówka na navData. nawigacja. getParam umieść tytuł,
abyśmy mieli ten tytuł w nagłówku. A teraz, spróbujmy, zapiszmy
wszystko i dodajmy nowe miejsce, test. Kliknij zapisz miejsce, jesteśmy cofnięci i widzimy, że jeśli go dotknę, przejdziemy
do ekranu szczegółów, w którym widzimy to w nagłówku. Spróbujmy też na Androidzie z testem,
zapisz to, kliknij na niego i wszystko działa. To podstawowy przepływ tego, ale
oczywiście nie zrobiliśmy jeszcze jednej funkcji natywnej.
Teraz nadszedł czas, abyśmy to zrobili i chcę zacząć od aparatu.