Upewnijmy się więc, że możemy zobaczyć wszystkie dane, z którymi pracujemy. W miejscu znalazłem już
adres, muszę tylko
upewnić się, że tam pasuję. Tak więc na ekranie listy miejsc, kiedy używam elementu miejsca, zamiast podawać
adres jako wartość zerową, oczywiście powinniśmy przekazać elementData. pozycja. adres tam,
ponieważ powinniśmy przechowywać adres.
Więc jeśli spróbujemy, a to się ponownie załaduje, zobaczymy tutaj fałszywy adres i teraz, jeśli dodamy nowy przedmiot, który powinien
działać jako tytuł, a następnie zdjęcie, aby zrobić ładne zdjęcie i możemy nawet trochę się
tutaj poruszać, naciskając klucz, który
tam widzisz, więc
teraz,
jeśli zrobię zdjęcie tutaj, tak, to wygląda dobrze, ten i potwierdź, klikając na przyciąć tam, że
wygląda dobrze.
Teraz może uzyskaj lokalizację użytkownika, a następnie zapisz to, wygląda to dobrze.
To jest adres siedziby głównej Google, to
wygląda jak zdjęcie, które zrobiłem,
więc to miłe.
Upewnijmy się, że na stronie szczegółów widzimy również nieco więcej na ten temat, a do tego
na ekranie szczegółów miejsca możemy oczywiście dostosować to i dodać widok przewijania, aby zapewnić, że zawsze możemy zobaczyć wszystko, my nie
potrzebuję tutaj płaskiej listy, ponieważ nie będziemy mieli nieskończonej ilości elementów, może po prostu trochę przewijania,
które jest wymagane w zależności od wielkości urządzenia,
a tam na pewno chcę mieć możliwość wyświetlenia obrazu .
Więc tutaj wyprowadzę mój obraz, a poniżej
chcę też móc wypisać mój adres, a następnie podgląd mapy, więc też go zaimportuję
i będziemy musieli trochę ulepszyć ten komponent trochę,
ale na razie zaimportuję podgląd mapy z podglądu mapy komponentów, tak jak to, i wyrzucę to
poniżej mojego tekstu tutaj.
Teraz w tekście chcę mieć adres końcowy i to oczywiście wszystkie dane, które spodziewam się przekazać
jako parametry lub za pomocą parametrów, więc
mówiąc precyzyjnie, kiedy wybieramy element, już przekazujemy identyfikator miejsca tutaj.
Więc na ekranie szczegółów miejsca mogę uzyskać identyfikator miejsca, uzyskując dostęp do rekwizytów. nawigacja. Identyfikator miejsca getParam jest identyfikatorem,
którego użyłem, a następnie możemy oczywiście użyć selektora, aby uzyskać pasujące dane z
naszego
sklepu Redux, więc z React
Redux, to właśnie z tego miejsca importujemy, a następnie tutaj możemy uzyskać wybrane miejsce za pomocą pomoc w użyciu
selektora, przekazać funkcję i stan dostępu. miejsca. miejsca, a następnie metodę znajdowania, aby znaleźć określone
miejsce, w którym identyfikator miejsca powinien być równy identyfikatorowi miejsca, który wyodrębniamy z naszych parametrów,
to jest miejsce, które załadowaliśmy dla tego ekranu i dlatego wybrane miejsce ma oczywiście pole adresu, które możemy uzyskać
dostęp, ponieważ podążamy za naszym modelem miejsca na końcu, a dla obrazu możemy oczywiście również powiązać
źródło i ustawić identyfikator URI na tym obiekcie, przekazujemy źródło do selectedPlace. imageUri, ponieważ w moim modelu miejsca nazywam
ten identyfikator URI obrazu, to właśnie
tutaj
wyodrębniam, a dla
podglądu mapy chcę przekazać w mojej lokalizacji.
Dobrą rzeczą jest to, że mój podgląd mapy oczywiście zajmuje
lokalizację, szuka tej prop położenia, więc mogę przekazać to i powinien to być obiekt z kluczem
lat, więc możemy użyć selectedPlace. lat dla tego i klucz lng, który jest zaznaczonyPlace. lng.
Więc teraz przekazujemy to wszystko.
Teraz zawinę również tekst w widok, a następnie przypiszę tutaj niektóre
style, więc na zdjęciu chcę mieć styl. obraz w tym widoku, który otacza wszystkie moje rzeczy
oparte na lokalizacji,
chcę mieć styl powiedzmy kontener lokalizacji. W tym widoku tutaj
styl
kontenera adresu, tutaj tekst, styl adresu i na podglądzie mapy, ustawię również styl i nazwij
ten podgląd
mapy, tak jak ten.
Teraz, jeśli użyjesz dokładnie tych samych nazw, w załączeniu znajdziesz styl, który dla ciebie skonfigurowałem, możesz po
prostu zastąpić obiekt stylów tym, a to
skonfiguruje style dla wszystkich tych dodanych przeze mnie identyfikatorów, aby wyglądały tak, jak ja chcę, żeby to wyglądało.
To jest załączone i możesz tego użyć, aby upewnić się, że otrzymujesz ten sam styl po wyjęciu
z pudełka, bez pisania przeze mnie wszystkich tych stylów, ponieważ napisaliśmy tak wiele stylów podczas
tego kursu, tutaj naprawdę chcę skupić się na natywnej funkcjonalności, a nie napisz to wszystko jeszcze raz.
Teraz jedna ważna rzecz, w widoku przewijania, powinieneś również ustawić styl kontenera
zawartości, a tam użyję szybkiego i brudnego stylu wstawiania, aby ustawić wyrównywane tutaj elementy do
centrów, aby wszystko było ładnie wyśrodkowane na osi poziomej. Dzięki temu powinniśmy być w stanie wyświetlić szczegóły dotyczące miejsca.
Jedna ważna uwaga: używam stałych kolorów w stylach, które
ci podałem, więc musisz się zaimportować, zaimportować kolory ze Stałych / kolorów, a także z tym importem dodanym tutaj, jeśli
to zapiszesz, a to przeładuje, powinieneś zobaczyć te miejsca na Androidzie i oczywiście możesz pokazać
tekst zastępczy, jeśli nie masz miejsc, ale teraz
tutaj, widzisz miejsca i jeśli
kliknę na to, to jest ekran szczegółów.
Teraz mam jeden problem z tym, że wygląda ładnie,
to
dobrze, ale jeśli kliknę na mapę, nic się nie wydarzy i oczywiście tam też chcę przejść
do ekranu mapy, ale w sposób nieedytowalny, więc przejdź do ekranu mapy, nie mogąc go tam edytować.
To pozostały element, który musimy
dodać.