1
00:00:02,080 --> 00:00:06,910
Dla lokalizacji użytkownika mamy inny pakiet wbudowany w expo, z którego możemy łatwo korzystać

2
00:00:06,910 --> 00:00:08,740
i to jest pakiet lokalizacji.

3
00:00:08,780 --> 00:00:14,230
Teraz, tak jak poprzednio, instalujesz go, postępując zgodnie z instrukcjami tutaj, a następnie widzisz

4
00:00:14,230 --> 00:00:15,520
tam przykład użycia,

5
00:00:15,520 --> 00:00:17,130
więc zróbmy to szybko.

6
00:00:17,140 --> 00:00:24,580
Uruchommy expo install expo-location w naszym projekcie, a po zainstalowaniu możemy teraz również

7
00:00:24,570 --> 00:00:27,580
dodać inny komponent, oprócz komponentu

8
00:00:27,580 --> 00:00:33,340
wyboru obrazu dodam LocationPicker. Plik js, ponieważ to kolejna rzecz, którą chcę móc

9
00:00:33,340 --> 00:00:38,920
robić w tej aplikacji, chcę móc wybrać lokalizację. W tym celu w komponencie

10
00:00:38,920 --> 00:00:45,490
wyboru lokalizacji zaimportuję React oczywiście z React, ponieważ będzie to na końcu zwykły komponent

11
00:00:45,490 --> 00:00:54,040
React i zaimportuję kilka rzeczy z React Native, a wśród nich jest widok, przycisk, który pozwala nam aby

12
00:00:54,040 --> 00:01:00,610
zacząć uzyskiwać lokalizację użytkownika, trochę tekstu, aby również wyświetlać domyślny tekst zastępczy, gdy nie

13
00:01:00,610 --> 00:01:06,640
wybrano żadnego miejsca, wskaźnik aktywności pokazujący pokrętło, podczas gdy czekamy na pobranie lokalizacji,

14
00:01:07,300 --> 00:01:13,840
a może także alert, aby wyświetlić alert jeśli coś pójdzie nie tak, a także

15
00:01:13,840 --> 00:01:16,840
arkusz stylów, aby stylizować ten komponent.

16
00:01:16,860 --> 00:01:24,390
Teraz tutaj mam komponent wyboru lokalizacji, który otrzymuje rekwizyty, a następnie zrobimy coś,

17
00:01:24,390 --> 00:01:33,390
skonfigurujemy obiekt stylów za pomocą arkusza stylów. utwórz, a na koniec wyeksportuj tutaj komponent

18
00:01:33,450 --> 00:01:40,870
wyboru lokalizacji jako domyślny. Teraz, jak powinien wyglądać ten komponent jsx?

19
00:01:40,940 --> 00:01:47,540
Ostatecznie to zależy od ciebie, ale zacznę tutaj bardzo prosto i po prostu

20
00:01:47,540 --> 00:01:48,460
będę

21
00:01:49,590 --> 00:01:56,580
miał widok z przyciskiem, który pozwoli mi zacząć uzyskiwać lokalizację użytkownika, a także inny

22
00:01:56,580 --> 00:02:04,080
widok, który pokazuje na przykład mój tekst zastępczy, nie wybrana lokalizacja, która zostanie później zastąpiona małym

23
00:02:04,110 --> 00:02:05,890
podglądem miejsca na mapie,

24
00:02:05,910 --> 00:02:10,010
więc dodam to później. Teraz tutaj, na przycisku,

25
00:02:13,220 --> 00:02:20,990
powiem na przykład: pobierz lokalizację użytkownika, ustaw kolor na Kolory. podstawowe i do tego, jak zawsze, upewnij się, że

26
00:02:20,990 --> 00:02:27,430
importujesz te kolory na stałe i po naciśnięciu tego, nic dziwnego, że chcę zacząć pobierać

27
00:02:27,430 --> 00:02:28,500
lokalizację użytkownika.

28
00:02:28,610 --> 00:02:38,180
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

29
00:02:38,210 --> 00:02:43,760
uzyskać lokalizację użytkownika i to uruchamiam po kliknięciu tego przycisku.

30
00:02:45,530 --> 00:02:57,040
Teraz do stylizacji tutaj dodam selektor lokalizacji stylu, w tym widoku dodam kolejny podgląd mapy stylu, możemy również

31
00:02:57,190 --> 00:03:03,790
stylizować ten tekst, ale pozostanę przy ustawieniach domyślnych i teraz

32
00:03:03,790 --> 00:03:15,570
dodam te dwa style do arkusz stylów, więc tutaj wybierz lokalizację, tam dodam margines na dole powiedzmy 15 i

33
00:03:15,570 --> 00:03:27,820
na podglądzie mapy, tam też dodam margines na dole powiedzmy 10 i szerokość 100% do weź całą dostępną szerokość, wysokość

34
00:03:27,820 --> 00:03:33,380
może 150, a także kolor obramowania tego szarawego

35
00:03:33,570 --> 00:03:41,310
koloru z kodem szesnastkowym #ccc i szerokość ramki równą jeden, to trochę

36
00:03:41,540 --> 00:03:47,620
przypomina pole podglądu obrazu. Dzięki temu mamy skonfigurowany ten komponent, możemy teraz

37
00:03:47,620 --> 00:03:50,170
włączyć go do nowego ekranu miejsca.

38
00:03:50,200 --> 00:04:00,970
Więc w tym komponencie ekranu zaimportuję selektor lokalizacji z komponentów, selektor lokalizacji taki jak ten i dodam go w

39
00:04:00,970 --> 00:04:05,750
kodzie jsx poniżej selektora obrazu, tak po prostu.

40
00:04:05,900 --> 00:04:10,540
Jeśli teraz to zapiszemy i zobaczymy, zobaczymy to pole tutaj.

41
00:04:10,560 --> 00:04:16,110
Teraz, kiedy klikam „Uzyskaj lokalizację użytkownika”, nie jest zaskakujące, że zacząłem uzyskiwać lokalizację użytkownika.

42
00:04:18,460 --> 00:04:26,110
W tym celu w naszym komponencie wyboru lokalizacji będziemy musieli zaimportować tutaj pewne rzeczy - zaimportujemy wszystko jako

43
00:04:26,200 --> 00:04:33,610
lokalizację z pakietu lokalizacji expo, który właśnie zainstalowaliśmy. Oprócz lokalizacji, podobnie jak w przypadku

44
00:04:33,610 --> 00:04:40,030
kamery, będziemy musieli poprosić o uprawnienia, więc zaimportujemy wszystko jako uprawnienia z

45
00:04:40,060 --> 00:04:47,970
uprawnień do wystawy, to również jest wymagane. Po dodaniu tego tutaj w module obsługi lokalizacji get, przede wszystkim chcę sprawdzić moje uprawnienia

46
00:04:48,090 --> 00:04:54,540
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ż

47
00:04:54,540 --> 00:04:59,010
zlecić na zewnątrz i pisać w bardziej ogólny sposób do pracy w różnych

48
00:04:59,010 --> 00:05:04,800
komponentach, tutaj po prostu skopiuję ją, zweryfikuję uprawnienia. Oczywiście tutaj nie pytam o

49
00:05:04,800 --> 00:05:12,750
przechylenie kamery, ale zamiast lokalizacji, musisz przyznać uprawnienia do lokalizacji, aby korzystać z tej aplikacji, a teraz sprawdź,

50
00:05:12,750 --> 00:05:20,820
czy uprawnienia są wykonywane tutaj w module obsługi lokalizacji. Możemy użyć async ponownie czekaj tutaj, aby poczekać na

51
00:05:20,850 --> 00:05:28,870
wynik tej kontroli, więc mam pozwolenie, co chcę sprawdzić tutaj, a jeśli nie, więc jeśli nie mamy uprawnień, to

52
00:05:29,020 --> 00:05:33,040
po prostu wrócę tutaj, nie ma trzeba kontynuować, ponieważ

53
00:05:33,040 --> 00:05:39,790
i tak nie będziemy mogli pobrać lokalizacji. W przeciwnym razie możemy kontynuować i teraz

54
00:05:39,970 --> 00:05:47,680
możemy użyć pakietu lokalizacji, aby uzyskać asynchronię bieżącej pozycji, a to robi to, co sugeruje nazwa,

55
00:05:47,680 --> 00:05:53,230
pobiera bieżącą pozycję użytkownika. Teraz zlokalizowanie użytkownika może chwilę potrwać, dlatego jest

56
00:05:53,230 --> 00:05:58,150
to zadanie asynchroniczne i dlatego zwraca obietnicę, obietnicę, która zostanie rozwiązana po uzyskaniu lokalizacji użytkownika lub

57
00:05:58,180 --> 00:06:04,230
która zostanie odrzucona, jeśli nie uda się jej pobrać. Możemy również skonfigurować to z przekazanym

58
00:06:04,240 --> 00:06:09,400
mu obiektem, jak zawsze w oficjalnych dokumentach, na których dowiedziałeś się

59
00:06:09,400 --> 00:06:16,550
wszystkiego o wszystkich opcjach, które możesz tam ustawić. Na przykład jedną z opcji, które można ustawić, jest przekroczenie limitu

60
00:06:16,550 --> 00:06:22,670
czasu i ustawienie tej wartości na pięć sekund, aby upewnić się, że jeśli nie będziemy mogli pobrać lokalizacji

61
00:06:22,670 --> 00:06:23,870
przez pięć sekund,

62
00:06:23,870 --> 00:06:27,260
przestaniemy próbować i wyrzucimy błąd, aby obietnica została odrzucona.

63
00:06:27,310 --> 00:06:34,930
Teraz możemy na to poczekać i oczywiście owinąć go w blok try catch, ważne jest, aby upewnić się, że radzimy sobie

64
00:06:35,590 --> 00:06:42,610
z błędami, jeśli nie uda nam się pobrać lokalizacji. Tutaj po prostu użyję komponentu alertu,

65
00:06:42,610 --> 00:06:52,410
który już importuję, aby wysłać alert, nie można pobrać lokalizacji, a następnie tutaj, spróbuj ponownie później lub wybierz

66
00:06:52,840 --> 00:06:59,940
lokalizację na mapie, co nie jest obecnie możliwe, ale które „ Wkrótce dodam

67
00:06:59,940 --> 00:07:07,920
i tutaj przycisk, w którym mówimy OK. To jest alert, który wyświetlam, jeśli pobieranie lokalizacji nie powiedzie się z

68
00:07:08,880 --> 00:07:10,090
jakiegoś powodu,

69
00:07:10,130 --> 00:07:12,470
w przeciwnym razie spodziewam się, że odzyskam

70
00:07:12,500 --> 00:07:15,200
lokalizację, więc jest to wynik tej obietnicy w

71
00:07:15,200 --> 00:07:16,920
końcu, lokalizacji, której możemy użyć.

72
00:07:17,120 --> 00:07:25,720
Teraz możemy wykorzystać tę lokalizację za pomocą stanu use do zarządzania niektórymi stanami wewnętrznymi tutaj, to

73
00:07:26,830 --> 00:07:36,250
jest wybraną lokalizacją i ustawioną wybraną lokalizację, i tam możemy wywołać stan use, który nie ma wartości początkowej

74
00:07:36,250 --> 00:07:37,810
tu i

75
00:07:37,810 --> 00:07:45,550
potem tutaj w module obsługi lokalizacji, możemy ustawić wybraną lokalizację na coś, musimy sprawdzić,

76
00:07:45,600 --> 00:07:52,230
co na teraz, zerować, ale zanim cokolwiek tu ustawimy, w rzeczywistości zobaczmy

77
00:07:52,290 --> 00:07:57,530
lokalizację dziennika w konsoli, aby poczuć, co jest w środku.

78
00:07:57,540 --> 00:08:03,740
Teraz chcę również pokazać spinner podczas pobierania, więc zarządzam tutaj innym stanem

79
00:08:03,740 --> 00:08:10,190
i to jest stan pobierania i początkowo jest to oczywiście fałsz, ale początkowo

80
00:08:10,220 --> 00:08:12,260
nie pobieramy, ale potem

81
00:08:12,650 --> 00:08:19,670
tutaj, w lokalizacji pobierania handler, zanim zaczniemy uzyskiwać lokalizację, ustawię pobieranie na prawdę, a

82
00:08:19,670 --> 00:08:21,090
kiedy skończymy,

83
00:08:21,260 --> 00:08:24,410
i to obejmuje również błąd, więc

84
00:08:24,410 --> 00:08:31,640
potem ustawię z powrotem na false, a teraz możemy użyć pobierania pokazać spinner podczas pobierania.

85
00:08:31,640 --> 00:08:39,740
Więc jeśli pobieranie jest prawdą, pokażę wskaźnik aktywności i tylko w innym przypadku pokażę ten tekst, a

86
00:08:39,950 --> 00:08:45,920
później oczywiście nie tylko pokażemy tekst, ale również pokażemy fragment mapy.

87
00:08:45,920 --> 00:08:48,260
Teraz można skonfigurować wskaźnik aktywności, możemy

88
00:08:48,260 --> 00:08:55,440
ustawić rozmiar na duży, a kolor na Kolory. podstawowy, jeśli chcesz. Po tym wszystkim wróćmy i

89
00:08:55,440 --> 00:08:57,940
spróbujmy tutaj na iOS, ponieważ chociaż

90
00:08:57,960 --> 00:09:03,060
nie mogę tutaj dodać obrazu, przynajmniej mogę sprawdzić lokalizację i kliknąć opcję Uzyskaj

91
00:09:03,060 --> 00:09:07,980
lokalizację użytkownika, a teraz jestem pytany, czy chcę przyznać uprawnienia, które chcę zezwolić,

92
00:09:08,040 --> 00:09:14,820
zawsze zezwalaj i widzisz ten spinner, jest super szybki, ponieważ jest to symulator, to także przy okazji

93
00:09:14,820 --> 00:09:19,270
symuluje lokalizację, to nie jest prawdziwa lokalizacja twojego komputera, na którym

94
00:09:19,480 --> 00:09:25,750
ją uruchamiasz, zamiast tego jest to domyślna, pozorna lokalizacja w San Francisco i tutaj na Androida,

95
00:09:25,780 --> 00:09:33,100
to samo, jeśli kliknę tutaj, aby uzyskać lokalizację użytkownika, muszę przyznać uprawnienia, a kiedy to zrobię, zobaczysz tutaj spinner,

96
00:09:33,100 --> 00:09:39,700
a następnie zobaczysz tylko dzienniki oczywiście coś widzisz. Tam widzisz obiekty, które były rejestrowane,

97
00:09:39,700 --> 00:09:45,670
w których masz obiekt podrzędny coord, czyli pole o nazwie coord i

98
00:09:45,670 --> 00:09:53,230
obiekt, który jest innym obiektem z dokładnością, a następnie parę długości i szerokości geograficznej opisującą tę

99
00:09:53,290 --> 00:10:00,170
fałszywą lokalizację, oba symulatory używają fałszywego lokalizacje. Masz także znacznik czasu.

100
00:10:00,210 --> 00:10:01,700
Więc teraz wiemy,

101
00:10:01,740 --> 00:10:08,790
co tam jest, więc możemy ustawić wybraną lokalizację, możemy teraz ustawić to, powiedzmy obiekt, w którym

102
00:10:09,540 --> 00:10:20,280
przechowujesz szerokość geograficzną lokalizacji. coords. szerokość geograficzna, to jest tam, dokładnie i długość geograficzna,. lokalizacja.

103
00:10:20,280 --> 00:10:20,280
coords. długość geograficzna.

104
00:10:20,320 --> 00:10:26,140
Więc teraz mamy tę wybraną lokalizację, a tej wybranej lokalizacji można teraz użyć

105
00:10:26,440 --> 00:10:28,440
na przykład do pokazania

106
00:10:28,480 --> 00:10:34,420
małego fragmentu mapy, gdy już mamy lokalizację. Zanim zrobię to tylko drobiazg, chcę upewnić się,

107
00:10:34,720 --> 00:10:41,920
ż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

108
00:10:42,280 --> 00:10:48,490
i wyrównaj elementy do środka, aby wszystkie zawartość tam jest wyśrodkowana poziomo i pionowo, to tylko

109
00:10:48,500 --> 00:10:50,310
drobiazg, więc teraz

110
00:10:50,320 --> 00:10:52,290
widzisz to wszystko w środku.

111
00:10:52,300 --> 00:10:58,390
Ale dzięki temu pokażmy teraz krótki fragment mapy, który pokazuje lokalizację wybraną przez użytkownika.