Dla lokalizacji użytkownika mamy inny pakiet wbudowany w expo, z którego możemy łatwo korzystać
i to jest pakiet lokalizacji.
Teraz, tak jak poprzednio, instalujesz go, postępując zgodnie z instrukcjami tutaj, a następnie widzisz
tam przykład użycia,
więc zróbmy to szybko.
Uruchommy expo install expo-location w naszym projekcie, a po zainstalowaniu możemy teraz również
dodać inny komponent, oprócz komponentu
wyboru obrazu dodam LocationPicker. Plik js, ponieważ to kolejna rzecz, którą chcę móc
robić w tej aplikacji, chcę móc wybrać lokalizację. W tym celu w komponencie
wyboru lokalizacji zaimportuję React oczywiście z React, ponieważ będzie to na końcu zwykły komponent
React i zaimportuję kilka rzeczy z React Native, a wśród nich jest widok, przycisk, który pozwala nam aby
zacząć uzyskiwać lokalizację użytkownika, trochę tekstu, aby również wyświetlać domyślny tekst zastępczy, gdy nie
wybrano żadnego miejsca, wskaźnik aktywności pokazujący pokrętło, podczas gdy czekamy na pobranie lokalizacji,
a może także alert, aby wyświetlić alert jeśli coś pójdzie nie tak, a także
arkusz stylów, aby stylizować ten komponent.
Teraz tutaj mam komponent wyboru lokalizacji, który otrzymuje rekwizyty, a następnie zrobimy coś,
skonfigurujemy obiekt stylów za pomocą arkusza stylów. utwórz, a na koniec wyeksportuj tutaj komponent
wyboru lokalizacji jako domyślny. Teraz, jak powinien wyglądać ten komponent jsx?
Ostatecznie to zależy od ciebie, ale zacznę tutaj bardzo prosto i po prostu
będę
miał widok z przyciskiem, który pozwoli mi zacząć uzyskiwać lokalizację użytkownika, a także inny
widok, który pokazuje na przykład mój tekst zastępczy, nie wybrana lokalizacja, która zostanie później zastąpiona małym
podglądem miejsca na mapie,
więc dodam to później. Teraz tutaj, na przycisku,
powiem na przykład: pobierz lokalizację użytkownika, ustaw kolor na Kolory. podstawowe i do tego, jak zawsze, upewnij się, że
importujesz te kolory na stałe i po naciśnięciu tego, nic dziwnego, że chcę zacząć pobierać
lokalizację użytkownika.
Więc tutaj dodam nową stałą, get handler, która jest funkcją, która następnie użyje właśnie zainstalowanego API lokalizacji, aby
uzyskać lokalizację użytkownika i to uruchamiam po kliknięciu tego przycisku.
Teraz do stylizacji tutaj dodam selektor lokalizacji stylu, w tym widoku dodam kolejny podgląd mapy stylu, możemy również
stylizować ten tekst, ale pozostanę przy ustawieniach domyślnych i teraz
dodam te dwa style do arkusz stylów, więc tutaj wybierz lokalizację, tam dodam margines na dole powiedzmy 15 i
na podglądzie mapy, tam też dodam margines na dole powiedzmy 10 i szerokość 100% do weź całą dostępną szerokość, wysokość
może 150, a także kolor obramowania tego szarawego
koloru z kodem szesnastkowym #ccc i szerokość ramki równą jeden, to trochę
przypomina pole podglądu obrazu. Dzięki temu mamy skonfigurowany ten komponent, możemy teraz
włączyć go do nowego ekranu miejsca.
Więc w tym komponencie ekranu zaimportuję selektor lokalizacji z komponentów, selektor lokalizacji taki jak ten i dodam go w
kodzie jsx poniżej selektora obrazu, tak po prostu.
Jeśli teraz to zapiszemy i zobaczymy, zobaczymy to pole tutaj.
Teraz, kiedy klikam „Uzyskaj lokalizację użytkownika”, nie jest zaskakujące, że zacząłem uzyskiwać lokalizację użytkownika.
W tym celu w naszym komponencie wyboru lokalizacji będziemy musieli zaimportować tutaj pewne rzeczy - zaimportujemy wszystko jako
lokalizację z pakietu lokalizacji expo, który właśnie zainstalowaliśmy. Oprócz lokalizacji, podobnie jak w przypadku
kamery, będziemy musieli poprosić o uprawnienia, więc zaimportujemy wszystko jako uprawnienia z
uprawnień do wystawy, to również jest wymagane. Po dodaniu tego tutaj w module obsługi lokalizacji get, przede wszystkim chcę sprawdzić moje uprawnienia
i w tym celu mogę skopiować podejście stosowane w selektorze obrazów. Mamy tutaj funkcję weryfikacji uprawnień, którą oczywiście możemy również
zlecić na zewnątrz i pisać w bardziej ogólny sposób do pracy w różnych
komponentach, tutaj po prostu skopiuję ją, zweryfikuję uprawnienia. Oczywiście tutaj nie pytam o
przechylenie kamery, ale zamiast lokalizacji, musisz przyznać uprawnienia do lokalizacji, aby korzystać z tej aplikacji, a teraz sprawdź,
czy uprawnienia są wykonywane tutaj w module obsługi lokalizacji. Możemy użyć async ponownie czekaj tutaj, aby poczekać na
wynik tej kontroli, więc mam pozwolenie, co chcę sprawdzić tutaj, a jeśli nie, więc jeśli nie mamy uprawnień, to
po prostu wrócę tutaj, nie ma trzeba kontynuować, ponieważ
i tak nie będziemy mogli pobrać lokalizacji. W przeciwnym razie możemy kontynuować i teraz
możemy użyć pakietu lokalizacji, aby uzyskać asynchronię bieżącej pozycji, a to robi to, co sugeruje nazwa,
pobiera bieżącą pozycję użytkownika. Teraz zlokalizowanie użytkownika może chwilę potrwać, dlatego jest
to zadanie asynchroniczne i dlatego zwraca obietnicę, obietnicę, która zostanie rozwiązana po uzyskaniu lokalizacji użytkownika lub
która zostanie odrzucona, jeśli nie uda się jej pobrać. Możemy również skonfigurować to z przekazanym
mu obiektem, jak zawsze w oficjalnych dokumentach, na których dowiedziałeś się
wszystkiego o wszystkich opcjach, które możesz tam ustawić. Na przykład jedną z opcji, które można ustawić, jest przekroczenie limitu
czasu i ustawienie tej wartości na pięć sekund, aby upewnić się, że jeśli nie będziemy mogli pobrać lokalizacji
przez pięć sekund,
przestaniemy próbować i wyrzucimy błąd, aby obietnica została odrzucona.
Teraz możemy na to poczekać i oczywiście owinąć go w blok try catch, ważne jest, aby upewnić się, że radzimy sobie
z błędami, jeśli nie uda nam się pobrać lokalizacji. Tutaj po prostu użyję komponentu alertu,
który już importuję, aby wysłać alert, nie można pobrać lokalizacji, a następnie tutaj, spróbuj ponownie później lub wybierz
lokalizację na mapie, co nie jest obecnie możliwe, ale które „ Wkrótce dodam
i tutaj przycisk, w którym mówimy OK. To jest alert, który wyświetlam, jeśli pobieranie lokalizacji nie powiedzie się z
jakiegoś powodu,
w przeciwnym razie spodziewam się, że odzyskam
lokalizację, więc jest to wynik tej obietnicy w
końcu, lokalizacji, której możemy użyć.
Teraz możemy wykorzystać tę lokalizację za pomocą stanu use do zarządzania niektórymi stanami wewnętrznymi tutaj, to
jest wybraną lokalizacją i ustawioną wybraną lokalizację, i tam możemy wywołać stan use, który nie ma wartości początkowej
tu i
potem tutaj w module obsługi lokalizacji, możemy ustawić wybraną lokalizację na coś, musimy sprawdzić,
co na teraz, zerować, ale zanim cokolwiek tu ustawimy, w rzeczywistości zobaczmy
lokalizację dziennika w konsoli, aby poczuć, co jest w środku.
Teraz chcę również pokazać spinner podczas pobierania, więc zarządzam tutaj innym stanem
i to jest stan pobierania i początkowo jest to oczywiście fałsz, ale początkowo
nie pobieramy, ale potem
tutaj, w lokalizacji pobierania handler, zanim zaczniemy uzyskiwać lokalizację, ustawię pobieranie na prawdę, a
kiedy skończymy,
i to obejmuje również błąd, więc
potem ustawię z powrotem na false, a teraz możemy użyć pobierania pokazać spinner podczas pobierania.
Więc jeśli pobieranie jest prawdą, pokażę wskaźnik aktywności i tylko w innym przypadku pokażę ten tekst, a
później oczywiście nie tylko pokażemy tekst, ale również pokażemy fragment mapy.
Teraz można skonfigurować wskaźnik aktywności, możemy
ustawić rozmiar na duży, a kolor na Kolory. podstawowy, jeśli chcesz. Po tym wszystkim wróćmy i
spróbujmy tutaj na iOS, ponieważ chociaż
nie mogę tutaj dodać obrazu, przynajmniej mogę sprawdzić lokalizację i kliknąć opcję Uzyskaj
lokalizację użytkownika, a teraz jestem pytany, czy chcę przyznać uprawnienia, które chcę zezwolić,
zawsze zezwalaj i widzisz ten spinner, jest super szybki, ponieważ jest to symulator, to także przy okazji
symuluje lokalizację, to nie jest prawdziwa lokalizacja twojego komputera, na którym
ją uruchamiasz, zamiast tego jest to domyślna, pozorna lokalizacja w San Francisco i tutaj na Androida,
to samo, jeśli kliknę tutaj, aby uzyskać lokalizację użytkownika, muszę przyznać uprawnienia, a kiedy to zrobię, zobaczysz tutaj spinner,
a następnie zobaczysz tylko dzienniki oczywiście coś widzisz. Tam widzisz obiekty, które były rejestrowane,
w których masz obiekt podrzędny coord, czyli pole o nazwie coord i
obiekt, który jest innym obiektem z dokładnością, a następnie parę długości i szerokości geograficznej opisującą tę
fałszywą lokalizację, oba symulatory używają fałszywego lokalizacje. Masz także znacznik czasu.
Więc teraz wiemy,
co tam jest, więc możemy ustawić wybraną lokalizację, możemy teraz ustawić to, powiedzmy obiekt, w którym
przechowujesz szerokość geograficzną lokalizacji. coords. szerokość geograficzna, to jest tam, dokładnie i długość geograficzna,. lokalizacja.
coords. długość geograficzna.
Więc teraz mamy tę wybraną lokalizację, a tej wybranej lokalizacji można teraz użyć
na przykład do pokazania
małego fragmentu mapy, gdy już mamy lokalizację. Zanim zrobię to tylko drobiazg, chcę upewnić się,
że zarówno tekst, jak i pokrętło są wyśrodkowane, więc na podglądzie mapy faktycznie ustawię również justowanie zawartości na środek
i wyrównaj elementy do środka, aby wszystkie zawartość tam jest wyśrodkowana poziomo i pionowo, to tylko
drobiazg, więc teraz
widzisz to wszystko w środku.
Ale dzięki temu pokażmy teraz krótki fragment mapy, który pokazuje lokalizację wybraną przez użytkownika.