Aby wyświetlić to na mapie, mamy ten komponent ekranu mapy, który obecnie ma tylko zawartość manekina, a teraz
musimy być w stanie renderować interaktywną mapę, a do tego expo ponownie nas obejmuje.
Tam znajdziesz pakiet
widoku mapy.
Teraz to za kulisami używa pakietu o nazwie React Native mapy, którego można również używać w aplikacjach
innych niż expo, przy okazji wielu z tych pakietów można używać w aplikacjach innych niż
expo i do tego powrócę w aplikacjach do budowania bez modułu expo,
ale na razie możemy po prostu wygodnie zainstalować to, uruchamiając to polecenie, a to zainstaluje
pakiet React Native mapy, a następnie
będziemy mogli go używać tak, jak widzimy to w tym przykładzie.
Nawiasem mówiąc, sprawdź również oficjalną dokumentację pod tym linkiem, aby zobaczyć o wiele więcej przykładów użycia, ponieważ tam możesz
dowiedzieć się wszystkiego o tym, jak korzystać z tego
pakietu, niektóre przykłady są również pokazane tutaj w tym module, oczywiście.
Uruchommy więc expo zainstaluj reaguj-natywne-mapy, aby zainstalować ten pakiet tutaj, a to pozwoli
nam na użycie różnych komponentów, które renderują interaktywne mapy.
Poczekajmy więc, aż to się skończy, a kiedy to się skończy, w komponencie ekranu mapy możemy zacząć korzystać z tej
mapy.
Teraz, aby użyć mapy, możemy zaimportować widok mapy z React Native map, więc z tego pakietu, który właśnie
zainstalowaliśmy, co pozwoli nam renderować mapę na ekranie.
Jak to działa?
Chodźmy tutaj na ekran mapy i zamiast wracać ten widok tutaj, zwrócę
taki widok mapy.
Teraz widok mapy może być na razie tagiem
samozamykającym się, możemy później dodać tam również znaczniki, ale na razie renderujmy go w ten sposób, a
teraz musisz skonfigurować ten widok mapy. Mówiąc ściślej, potrzebuje
rekwizytów regionu, które podpowiadają, na czym powinien się skupić podczas ładowania, a więc na której
części mapy lub na której części świata powinien się skupić podczas ładowania.
Musimy więc stworzyć taki region tutaj i zapiszę go w stałej nazwie regionu mapy, a region jest w
rzeczywistości obiektem o czterech właściwościach i musisz nazwać je w ten sposób - szerokość geograficzna, a
nie szerokość geograficzna, ale tak naprawdę
szerokość geograficzna zapisana, długość, szerokość geograficzna Delta i długość geograficzna Delta.
Delty w zasadzie ustawiają współczynnik powiększenia, ponieważ opisuje on, ile przestrzeni można zobaczyć wokół centrum, co
opisano za pomocą tych dwóch punktów.
To opisuje punkt wraz z dwiema
deltami, opisuje powierzchnię.
Więc teraz możemy zacząć od niektórych wartości zastępczych,
zanim później upewnimy się, że możemy to wstępnie wypełnić.
Więc tutaj ustawię wartość manekina na 37. 78 i -122. 43, który
znajduje się w obszarze zatoki wokół siedziby Google i tutaj szerokość geograficzna
Delta zajmie 0. 0922, a następnie 0. 0421, stwierdziłem, że
działa to całkiem dobrze jako region.
Oczywiście możesz eksperymentować z tymi liczbami, ale w końcu przejdź tutaj w tym regionie mapy.
To powinno wyrenderować mapę na ekranie, teraz musimy po prostu
być w stanie do niej dotrzeć i
w tym celu pozwolić mi wrócić do wyboru lokalizacji i chcę dotrzeć do niej na dwa różne
sposoby - jeden za pomocą przycisku których jeszcze nie dodałem. Oprócz przycisku Uzyskaj lokalizację użytkownika chcę
mieć drugi przycisk, który powinien znajdować się obok pierwszego, więc dodam widok, aby zawinąć oba,
a następnie przesunę ten przycisk tutaj i będę miał drugi przycisk i
ten przycisk będzie ogólnie skonfigurowany w ten sam sposób, ale powiem pick na mapie i oczywiście uruchomię
inną metodę, inną funkcję, tutaj chcę uruchomić funkcję, która jest operatorem pick na mapie i dlatego użyję to tutaj
i to
jeden ze sposobów wybrania tego. Innym sposobem wyboru tego lub
przejścia do mapy jest kliknięcie podglądu mapy. Zanim to zaimplementuję, pozwól mi szybko nadać styl widokowi, który zawiera dwa przyciski.
Dam mu identyfikator stylu akcji, a następnie na dole działania można skonfigurować w stosunkowo
prosty sposób.
Chcę, aby przedmiot siedział obok siebie, więc kierunek wygięcia będzie równy rzędowi, a nie kolumnie. W uzasadnieniu treści może
być miejsce dookoła, aby rozdzielić dostępne wolne miejsce wokół obu przycisków, wezmę szerokość
100% dla tego wiersza i to wszystko.
Teraz mam tutaj moje przyciski,
teraz musimy upewnić się, że możemy również dotknąć podglądu mapy i w tym celu pozwól
mi przejść do podglądu mapy i owinąć to, nie w widoku, ale w dotykalnym komponencie i tutaj Po prostu
użyję krycia dotykowego, oczywiście możesz też wybrać inne dotykowe komponenty w oparciu o
platformę,
na której działasz, chcę zachować to stosunkowo proste, więc po prostu zastąpię ten widok tutaj kryciem dotykowym,
mam tu
swój styl, to dobrze, ale oczywiście mam też funkcję onPress i tam chcę uruchomić funkcję,
którą spodziewam się uzyskać z zewnątrz za pomocą rekwizytów.
Zadzwonię też na onPress, ale możesz nadać temu rekwizytowi dowolne imię.
To pozwala nam teraz dodać prop onPress na podglądzie
mapy, więc tutaj w selektorze lokalizacji mogę słuchać onPress na podglądzie mapy i tam oczywiście chcę
uruchomić tę samą funkcję, co po kliknięciu przycisku w dół tam.
Chcę uruchomić polecenie obsługi map,
więc to właśnie robię.
Teraz moduł obsługi map powinien po prostu przejść do ekranu mapy po
prawej stronie, abyśmy mogli tam powiedzieć rekwizyty. nawigacja. nawiguj po mapie i to wszystko na sekundę.
Więc jeśli teraz to zapiszemy, powinniśmy być w stanie dotrzeć do tej pełnoekranowej interaktywnej mapy, na której nie możemy
jeszcze wybrać miejsca, ale przynajmniej możemy je wyświetlić.
Więc teraz, jeśli kliknę na plus tutaj, a następnie wybiorę na mapie, pojawi
się błąd, dlaczego to jest? Jest to całkowicie niezwiązane z modułami natywnymi. Być może pamiętasz, że rekwizyt nawigacyjny jest
dostępny tylko na komponentach, które są ładowane bezpośrednio jako ekrany, których oczywiście nie ma narzędzie do
wyboru lokalizacji. Teraz
są różne obejścia, możemy użyć
komponentu wyższego rzędu, którego możemy użyć,
możemy również zainstalować pakiet haków React specyficznych dla nawigacji, ale tutaj
przejdę do prostego podejścia i upewnię się, że mam rekwizyt nawigacyjny na selektorze lokalizacji według
przechodzę do nowego ekranu miejsca, w którym używam selektora lokalizacji i tam
ustawię ten rekwizyt nawigacyjny i rekwizyty do przodu. nawigacja, którą tutaj mam, jest dostępna,
ponieważ jest to komponent bezpośrednio ładowany przez nawigator, więc teraz
po prostu przekazuję dostęp do moich rekwizytów nawigacyjnych. I dzięki temu, jeśli teraz wrócimy i
klikniemy to, ładujemy tę mapę tutaj lub przynajmniej ekran mapy, ale
gdzie jest mapa?
Cóż, mapa jest niewidoczna, ponieważ, i to ważne, musisz dodać styl,
a tutaj dodam style. mapa i może to być bardzo prosty styl, ale musisz
tylko określić, jak duży powinien być, ponieważ domyślnie nie będzie zajmował żadnego miejsca.
Tak więc, po prostu ustawiając flex na jeden tutaj i mówiąc, że powinien on zająć całą dostępną przestrzeń, po prostu
robiąc to, upewnisz się, że zobaczysz mapę.
Teraz, jeśli klikniesz na to, tutaj ładuje się nasza mapa. Warto również zauważyć, że na iOS automatycznie korzystasz z Apple
Maps, chociaż możesz także użyć Google Maps, jeśli chcesz, oficjalne dokumenty mówią
ci, jak na Androidzie zawsze używasz map Google.
Więc tutaj, jeśli kliknę na pick
na mapie, zobaczymy również, że kiedy załadujemy nowy ekran, oto jest. Teraz możemy oczywiście przejść do tego ekranu,
klikając tutaj nasz podgląd,
właśnie to
skonfigurowaliśmy, więc działa również, oczywiście, działa również na iOS.
Nawiasem mówiąc, animacja tutaj nie jest super płynna, będzie to na prawdziwym urządzeniu, więc to
nie jest problem, to tylko tutaj na emulatorze.
Dzięki temu mamy tutaj naszą mapę i na tej mapie możemy przewijać. Znów na symulatorze może być trochę
mały, na prawdziwym urządzeniu tak nie będzie.
Tutaj możesz przewijać, będziesz mógł później uszczypnąć i powiększyć obraz, abyś mógł to wszystko
zrobić, a dzięki temu zobaczymy mapę.
Teraz mapa jest użyteczna, ale oczywiście nie możemy jeszcze wybrać tam miejsca, więc to
kolejna rzecz, którą musimy zmienić.