1
00:00:02,100 --> 00:00:09,600
Aby wyświetlić to na mapie, mamy ten komponent ekranu mapy, który obecnie ma tylko zawartość manekina, a teraz

2
00:00:09,600 --> 00:00:15,800
musimy być w stanie renderować interaktywną mapę, a do tego expo ponownie nas obejmuje.

3
00:00:15,870 --> 00:00:17,880
Tam znajdziesz pakiet

4
00:00:18,970 --> 00:00:20,810
widoku mapy.

5
00:00:20,850 --> 00:00:25,840
Teraz to za kulisami używa pakietu o nazwie React Native mapy, którego można również używać w aplikacjach

6
00:00:25,840 --> 00:00:30,220
innych niż expo, przy okazji wielu z tych pakietów można używać w aplikacjach innych niż

7
00:00:30,220 --> 00:00:33,950
expo i do tego powrócę w aplikacjach do budowania bez modułu expo,

8
00:00:34,060 --> 00:00:38,480
ale na razie możemy po prostu wygodnie zainstalować to, uruchamiając to polecenie, a to zainstaluje

9
00:00:38,500 --> 00:00:40,630
pakiet React Native mapy, a następnie

10
00:00:40,640 --> 00:00:43,820
będziemy mogli go używać tak, jak widzimy to w tym przykładzie.

11
00:00:43,900 --> 00:00:49,660
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

12
00:00:49,660 --> 00:00:52,660
dowiedzieć się wszystkiego o tym, jak korzystać z tego

13
00:00:52,660 --> 00:00:56,300
pakietu, niektóre przykłady są również pokazane tutaj w tym module, oczywiście.

14
00:00:56,410 --> 00:01:01,810
Uruchommy więc expo zainstaluj reaguj-natywne-mapy, aby zainstalować ten pakiet tutaj, a to pozwoli

15
00:01:01,810 --> 00:01:06,160
nam na użycie różnych komponentów, które renderują interaktywne mapy.

16
00:01:06,160 --> 00:01:12,860
Poczekajmy więc, aż to się skończy, a kiedy to się skończy, w komponencie ekranu mapy możemy zacząć korzystać z tej

17
00:01:12,860 --> 00:01:13,300
mapy.

18
00:01:15,730 --> 00:01:26,160
Teraz, aby użyć mapy, możemy zaimportować widok mapy z React Native map, więc z tego pakietu, który właśnie

19
00:01:26,160 --> 00:01:31,150
zainstalowaliśmy, co pozwoli nam renderować mapę na ekranie.

20
00:01:31,200 --> 00:01:32,730
Jak to działa?

21
00:01:32,730 --> 00:01:38,880
Chodźmy tutaj na ekran mapy i zamiast wracać ten widok tutaj, zwrócę

22
00:01:39,630 --> 00:01:41,340
taki widok mapy.

23
00:01:41,370 --> 00:01:43,470
Teraz widok mapy może być na razie tagiem

24
00:01:43,470 --> 00:01:47,910
samozamykającym się, możemy później dodać tam również znaczniki, ale na razie renderujmy go w ten sposób, a

25
00:01:48,180 --> 00:01:51,530
teraz musisz skonfigurować ten widok mapy. Mówiąc ściślej, potrzebuje

26
00:01:51,540 --> 00:01:58,310
rekwizytów regionu, które podpowiadają, na czym powinien się skupić podczas ładowania, a więc na której

27
00:01:58,440 --> 00:02:03,990
części mapy lub na której części świata powinien się skupić podczas ładowania.

28
00:02:03,990 --> 00:02:12,770
Musimy więc stworzyć taki region tutaj i zapiszę go w stałej nazwie regionu mapy, a region jest w

29
00:02:12,770 --> 00:02:20,810
rzeczywistości obiektem o czterech właściwościach i musisz nazwać je w ten sposób - szerokość geograficzna, a

30
00:02:20,840 --> 00:02:24,470
nie szerokość geograficzna, ale tak naprawdę

31
00:02:27,360 --> 00:02:32,680
szerokość geograficzna zapisana, długość, szerokość geograficzna Delta i długość geograficzna Delta.

32
00:02:32,830 --> 00:02:41,430
Delty w zasadzie ustawiają współczynnik powiększenia, ponieważ opisuje on, ile przestrzeni można zobaczyć wokół centrum, co

33
00:02:41,490 --> 00:02:45,450
opisano za pomocą tych dwóch punktów.

34
00:02:45,480 --> 00:02:48,690
To opisuje punkt wraz z dwiema

35
00:02:48,690 --> 00:02:51,030
deltami, opisuje powierzchnię.

36
00:02:51,080 --> 00:02:54,890
Więc teraz możemy zacząć od niektórych wartości zastępczych,

37
00:02:54,890 --> 00:02:58,820
zanim później upewnimy się, że możemy to wstępnie wypełnić.

38
00:02:58,820 --> 00:03:03,980
Więc tutaj ustawię wartość manekina na 37. 78 i -122. 43, który

39
00:03:03,980 --> 00:03:11,900
znajduje się w obszarze zatoki wokół siedziby Google i tutaj szerokość geograficzna

40
00:03:11,900 --> 00:03:18,080
Delta zajmie 0. 0922, a następnie 0. 0421, stwierdziłem, że

41
00:03:18,080 --> 00:03:21,030
działa to całkiem dobrze jako region.

42
00:03:21,080 --> 00:03:27,120
Oczywiście możesz eksperymentować z tymi liczbami, ale w końcu przejdź tutaj w tym regionie mapy.

43
00:03:27,200 --> 00:03:30,020
To powinno wyrenderować mapę na ekranie, teraz musimy po prostu

44
00:03:30,110 --> 00:03:32,320
być w stanie do niej dotrzeć i

45
00:03:32,330 --> 00:03:37,000
w tym celu pozwolić mi wrócić do wyboru lokalizacji i chcę dotrzeć do niej na dwa różne

46
00:03:37,010 --> 00:03:42,380
sposoby - jeden za pomocą przycisku których jeszcze nie dodałem. Oprócz przycisku Uzyskaj lokalizację użytkownika chcę

47
00:03:42,390 --> 00:03:48,730
mieć drugi przycisk, który powinien znajdować się obok pierwszego, więc dodam widok, aby zawinąć oba,

48
00:03:48,730 --> 00:03:53,830
a następnie przesunę ten przycisk tutaj i będę miał drugi przycisk i

49
00:03:53,830 --> 00:04:01,400
ten przycisk będzie ogólnie skonfigurowany w ten sam sposób, ale powiem pick na mapie i oczywiście uruchomię

50
00:04:01,400 --> 00:04:09,740
inną metodę, inną funkcję, tutaj chcę uruchomić funkcję, która jest operatorem pick na mapie i dlatego użyję to tutaj

51
00:04:09,740 --> 00:04:10,870
i to

52
00:04:10,940 --> 00:04:16,220
jeden ze sposobów wybrania tego. Innym sposobem wyboru tego lub

53
00:04:16,220 --> 00:04:22,900
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.

54
00:04:22,900 --> 00:04:30,460
Dam mu identyfikator stylu akcji, a następnie na dole działania można skonfigurować w stosunkowo

55
00:04:30,460 --> 00:04:31,620
prosty sposób.

56
00:04:32,930 --> 00:04:38,720
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

57
00:04:38,720 --> 00:04:45,580
być miejsce dookoła, aby rozdzielić dostępne wolne miejsce wokół obu przycisków, wezmę szerokość

58
00:04:45,620 --> 00:04:49,400
100% dla tego wiersza i to wszystko.

59
00:04:49,400 --> 00:04:51,170
Teraz mam tutaj moje przyciski,

60
00:04:51,170 --> 00:04:56,510
teraz musimy upewnić się, że możemy również dotknąć podglądu mapy i w tym celu pozwól

61
00:04:56,510 --> 00:05:03,090
mi przejść do podglądu mapy i owinąć to, nie w widoku, ale w dotykalnym komponencie i tutaj Po prostu

62
00:05:03,110 --> 00:05:07,700
użyję krycia dotykowego, oczywiście możesz też wybrać inne dotykowe komponenty w oparciu o

63
00:05:07,700 --> 00:05:08,260
platformę,

64
00:05:08,270 --> 00:05:14,000
na której działasz, chcę zachować to stosunkowo proste, więc po prostu zastąpię ten widok tutaj kryciem dotykowym,

65
00:05:14,450 --> 00:05:15,430
mam tu

66
00:05:15,440 --> 00:05:20,750
swój styl, to dobrze, ale oczywiście mam też funkcję onPress i tam chcę uruchomić funkcję,

67
00:05:20,750 --> 00:05:23,950
którą spodziewam się uzyskać z zewnątrz za pomocą rekwizytów.

68
00:05:24,020 --> 00:05:28,210
Zadzwonię też na onPress, ale możesz nadać temu rekwizytowi dowolne imię.

69
00:05:28,250 --> 00:05:32,030
To pozwala nam teraz dodać prop onPress na podglądzie

70
00:05:32,030 --> 00:05:38,030
mapy, więc tutaj w selektorze lokalizacji mogę słuchać onPress na podglądzie mapy i tam oczywiście chcę

71
00:05:38,030 --> 00:05:42,050
uruchomić tę samą funkcję, co po kliknięciu przycisku w dół tam.

72
00:05:42,140 --> 00:05:44,420
Chcę uruchomić polecenie obsługi map,

73
00:05:44,660 --> 00:05:46,490
więc to właśnie robię.

74
00:05:46,520 --> 00:05:49,790
Teraz moduł obsługi map powinien po prostu przejść do ekranu mapy po

75
00:05:49,790 --> 00:05:56,700
prawej stronie, abyśmy mogli tam powiedzieć rekwizyty. nawigacja. nawiguj po mapie i to wszystko na sekundę.

76
00:05:56,720 --> 00:06:01,760
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

77
00:06:01,760 --> 00:06:04,140
jeszcze wybrać miejsca, ale przynajmniej możemy je wyświetlić.

78
00:06:04,160 --> 00:06:09,500
Więc teraz, jeśli kliknę na plus tutaj, a następnie wybiorę na mapie, pojawi

79
00:06:09,600 --> 00:06:15,930
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

80
00:06:15,930 --> 00:06:20,700
dostępny tylko na komponentach, które są ładowane bezpośrednio jako ekrany, których oczywiście nie ma narzędzie do

81
00:06:20,700 --> 00:06:22,140
wyboru lokalizacji. Teraz

82
00:06:22,140 --> 00:06:23,750
są różne obejścia, możemy użyć

83
00:06:23,760 --> 00:06:26,070
komponentu wyższego rzędu, którego możemy użyć,

84
00:06:26,080 --> 00:06:29,910
możemy również zainstalować pakiet haków React specyficznych dla nawigacji, ale tutaj

85
00:06:30,360 --> 00:06:35,430
przejdę do prostego podejścia i upewnię się, że mam rekwizyt nawigacyjny na selektorze lokalizacji według

86
00:06:35,760 --> 00:06:39,720
przechodzę do nowego ekranu miejsca, w którym używam selektora lokalizacji i tam

87
00:06:39,960 --> 00:06:45,600
ustawię ten rekwizyt nawigacyjny i rekwizyty do przodu. nawigacja, którą tutaj mam, jest dostępna,

88
00:06:45,600 --> 00:06:49,170
ponieważ jest to komponent bezpośrednio ładowany przez nawigator, więc teraz

89
00:06:49,170 --> 00:06:54,960
po prostu przekazuję dostęp do moich rekwizytów nawigacyjnych. I dzięki temu, jeśli teraz wrócimy i

90
00:06:55,680 --> 00:07:00,300
klikniemy to, ładujemy tę mapę tutaj lub przynajmniej ekran mapy, ale

91
00:07:00,320 --> 00:07:01,740
gdzie jest mapa?

92
00:07:01,820 --> 00:07:09,290
Cóż, mapa jest niewidoczna, ponieważ, i to ważne, musisz dodać styl,

93
00:07:09,290 --> 00:07:15,130
a tutaj dodam style. mapa i może to być bardzo prosty styl, ale musisz

94
00:07:15,140 --> 00:07:18,520
tylko określić, jak duży powinien być, ponieważ domyślnie nie będzie zajmował żadnego miejsca.

95
00:07:18,560 --> 00:07:24,410
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

96
00:07:24,410 --> 00:07:26,840
robiąc to, upewnisz się, że zobaczysz mapę.

97
00:07:26,840 --> 00:07:35,360
Teraz, jeśli klikniesz na to, tutaj ładuje się nasza mapa. Warto również zauważyć, że na iOS automatycznie korzystasz z Apple

98
00:07:35,450 --> 00:07:40,490
Maps, chociaż możesz także użyć Google Maps, jeśli chcesz, oficjalne dokumenty mówią

99
00:07:40,490 --> 00:07:44,680
ci, jak na Androidzie zawsze używasz map Google.

100
00:07:44,690 --> 00:07:46,820
Więc tutaj, jeśli kliknę na pick

101
00:07:46,910 --> 00:07:53,430
na mapie, zobaczymy również, że kiedy załadujemy nowy ekran, oto jest. Teraz możemy oczywiście przejść do tego ekranu,

102
00:07:53,430 --> 00:07:55,290
klikając tutaj nasz podgląd,

103
00:07:55,350 --> 00:07:56,580
właśnie to

104
00:07:56,580 --> 00:08:00,500
skonfigurowaliśmy, więc działa również, oczywiście, działa również na iOS.

105
00:08:00,540 --> 00:08:05,940
Nawiasem mówiąc, animacja tutaj nie jest super płynna, będzie to na prawdziwym urządzeniu, więc to

106
00:08:05,940 --> 00:08:09,300
nie jest problem, to tylko tutaj na emulatorze.

107
00:08:09,300 --> 00:08:14,040
Dzięki temu mamy tutaj naszą mapę i na tej mapie możemy przewijać. Znów na symulatorze może być trochę

108
00:08:14,040 --> 00:08:16,620
mały, na prawdziwym urządzeniu tak nie będzie.

109
00:08:16,620 --> 00:08:21,090
Tutaj możesz przewijać, będziesz mógł później uszczypnąć i powiększyć obraz, abyś mógł to wszystko

110
00:08:21,090 --> 00:08:23,150
zrobić, a dzięki temu zobaczymy mapę.

111
00:08:23,220 --> 00:08:27,570
Teraz mapa jest użyteczna, ale oczywiście nie możemy jeszcze wybrać tam miejsca, więc to

112
00:08:27,600 --> 00:08:29,430
kolejna rzecz, którą musimy zmienić.