1
00:00:02,200 --> 00:00:07,030
Upewnijmy się więc, że możemy zobaczyć wszystkie dane, z którymi pracujemy. W miejscu znalazłem już

2
00:00:07,030 --> 00:00:09,310
adres, muszę tylko

3
00:00:09,310 --> 00:00:14,820
upewnić się, że tam pasuję. Tak więc na ekranie listy miejsc, kiedy używam elementu miejsca, zamiast podawać

4
00:00:14,830 --> 00:00:20,940
adres jako wartość zerową, oczywiście powinniśmy przekazać elementData. pozycja. adres tam,

5
00:00:20,940 --> 00:00:23,820
ponieważ powinniśmy przechowywać adres.

6
00:00:23,820 --> 00:00:33,960
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

7
00:00:33,960 --> 00:00:41,260
działać jako tytuł, a następnie zdjęcie, aby zrobić ładne zdjęcie i możemy nawet trochę się

8
00:00:41,260 --> 00:00:43,600
tutaj poruszać, naciskając klucz, który

9
00:00:43,600 --> 00:00:45,480
tam widzisz, więc

10
00:00:45,700 --> 00:00:46,630
teraz,

11
00:00:47,870 --> 00:00:55,760
jeśli zrobię zdjęcie tutaj, tak, to wygląda dobrze, ten i potwierdź, klikając na przyciąć tam, że

12
00:00:55,850 --> 00:00:56,900
wygląda dobrze.

13
00:00:56,900 --> 00:01:02,600
Teraz może uzyskaj lokalizację użytkownika, a następnie zapisz to, wygląda to dobrze.

14
00:01:02,600 --> 00:01:04,350
To jest adres siedziby głównej Google, to

15
00:01:04,350 --> 00:01:05,550
wygląda jak zdjęcie, które zrobiłem,

16
00:01:05,550 --> 00:01:06,630
więc to miłe.

17
00:01:06,630 --> 00:01:12,240
Upewnijmy się, że na stronie szczegółów widzimy również nieco więcej na ten temat, a do tego

18
00:01:12,570 --> 00:01:19,890
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

19
00:01:19,890 --> 00:01:25,460
potrzebuję tutaj płaskiej listy, ponieważ nie będziemy mieli nieskończonej ilości elementów, może po prostu trochę przewijania,

20
00:01:25,460 --> 00:01:28,690
które jest wymagane w zależności od wielkości urządzenia,

21
00:01:29,180 --> 00:01:32,840
a tam na pewno chcę mieć możliwość wyświetlenia obrazu .

22
00:01:32,840 --> 00:01:36,410
Więc tutaj wyprowadzę mój obraz, a poniżej

23
00:01:36,410 --> 00:01:43,270
chcę też móc wypisać mój adres, a następnie podgląd mapy, więc też go zaimportuję

24
00:01:43,280 --> 00:01:47,190
i będziemy musieli trochę ulepszyć ten komponent trochę,

25
00:01:47,200 --> 00:01:55,110
ale na razie zaimportuję podgląd mapy z podglądu mapy komponentów, tak jak to, i wyrzucę to

26
00:01:55,110 --> 00:01:57,830
poniżej mojego tekstu tutaj.

27
00:01:57,890 --> 00:02:06,650
Teraz w tekście chcę mieć adres końcowy i to oczywiście wszystkie dane, które spodziewam się przekazać

28
00:02:06,650 --> 00:02:11,040
jako parametry lub za pomocą parametrów, więc

29
00:02:11,120 --> 00:02:16,660
mówiąc precyzyjnie, kiedy wybieramy element, już przekazujemy identyfikator miejsca tutaj.

30
00:02:16,700 --> 00:02:25,200
Więc na ekranie szczegółów miejsca mogę uzyskać identyfikator miejsca, uzyskując dostęp do rekwizytów. nawigacja. Identyfikator miejsca getParam jest identyfikatorem,

31
00:02:25,230 --> 00:02:32,430
którego użyłem, a następnie możemy oczywiście użyć selektora, aby uzyskać pasujące dane z

32
00:02:32,490 --> 00:02:33,530
naszego

33
00:02:33,540 --> 00:02:36,680
sklepu Redux, więc z React

34
00:02:36,780 --> 00:02:47,260
Redux, to właśnie z tego miejsca importujemy, a następnie tutaj możemy uzyskać wybrane miejsce za pomocą pomoc w użyciu

35
00:02:47,300 --> 00:02:57,950
selektora, przekazać funkcję i stan dostępu. miejsca. miejsca, a następnie metodę znajdowania, aby znaleźć określone

36
00:02:57,950 --> 00:03:03,920
miejsce, w którym identyfikator miejsca powinien być równy identyfikatorowi miejsca, który wyodrębniamy z naszych parametrów,

37
00:03:03,920 --> 00:03:11,420
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ć

38
00:03:11,420 --> 00:03:17,750
dostęp, ponieważ podążamy za naszym modelem miejsca na końcu, a dla obrazu możemy oczywiście również powiązać

39
00:03:17,750 --> 00:03:26,600
źródło i ustawić identyfikator URI na tym obiekcie, przekazujemy źródło do selectedPlace. imageUri, ponieważ w moim modelu miejsca nazywam

40
00:03:26,690 --> 00:03:30,510
ten identyfikator URI obrazu, to właśnie

41
00:03:30,520 --> 00:03:31,440
tutaj

42
00:03:31,440 --> 00:03:33,640
wyodrębniam, a dla

43
00:03:33,940 --> 00:03:38,380
podglądu mapy chcę przekazać w mojej lokalizacji.

44
00:03:38,390 --> 00:03:42,590
Dobrą rzeczą jest to, że mój podgląd mapy oczywiście zajmuje

45
00:03:42,590 --> 00:03:49,430
lokalizację, szuka tej prop położenia, więc mogę przekazać to i powinien to być obiekt z kluczem

46
00:03:49,520 --> 00:03:57,340
lat, więc możemy użyć selectedPlace. lat dla tego i klucz lng, który jest zaznaczonyPlace. lng.

47
00:03:57,360 --> 00:04:01,540
Więc teraz przekazujemy to wszystko.

48
00:04:01,590 --> 00:04:09,030
Teraz zawinę również tekst w widok, a następnie przypiszę tutaj niektóre

49
00:04:09,070 --> 00:04:19,490
style, więc na zdjęciu chcę mieć styl. obraz w tym widoku, który otacza wszystkie moje rzeczy

50
00:04:19,490 --> 00:04:21,670
oparte na lokalizacji,

51
00:04:21,800 --> 00:04:28,350
chcę mieć styl powiedzmy kontener lokalizacji. W tym widoku tutaj

52
00:04:28,370 --> 00:04:29,600
styl

53
00:04:31,980 --> 00:04:44,550
kontenera adresu, tutaj tekst, styl adresu i na podglądzie mapy, ustawię również styl i nazwij

54
00:04:44,550 --> 00:04:46,400
ten podgląd

55
00:04:46,400 --> 00:04:49,860
mapy, tak jak ten.

56
00:04:51,410 --> 00:04:56,630
Teraz, jeśli użyjesz dokładnie tych samych nazw, w załączeniu znajdziesz styl, który dla ciebie skonfigurowałem, możesz po

57
00:04:56,630 --> 00:04:59,010
prostu zastąpić obiekt stylów tym, a to

58
00:04:59,120 --> 00:05:04,520
skonfiguruje style dla wszystkich tych dodanych przeze mnie identyfikatorów, aby wyglądały tak, jak ja chcę, żeby to wyglądało.

59
00:05:04,520 --> 00:05:09,200
To jest załączone i możesz tego użyć, aby upewnić się, że otrzymujesz ten sam styl po wyjęciu

60
00:05:09,200 --> 00:05:13,730
z pudełka, bez pisania przeze mnie wszystkich tych stylów, ponieważ napisaliśmy tak wiele stylów podczas

61
00:05:13,730 --> 00:05:18,430
tego kursu, tutaj naprawdę chcę skupić się na natywnej funkcjonalności, a nie napisz to wszystko jeszcze raz.

62
00:05:18,490 --> 00:05:23,420
Teraz jedna ważna rzecz, w widoku przewijania, powinieneś również ustawić styl kontenera

63
00:05:23,420 --> 00:05:29,300
zawartości, a tam użyję szybkiego i brudnego stylu wstawiania, aby ustawić wyrównywane tutaj elementy do

64
00:05:29,300 --> 00:05:37,710
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.

65
00:05:37,710 --> 00:05:41,590
Jedna ważna uwaga: używam stałych kolorów w stylach, które

66
00:05:41,620 --> 00:05:50,490
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

67
00:05:50,490 --> 00:05:56,970
to zapiszesz, a to przeładuje, powinieneś zobaczyć te miejsca na Androidzie i oczywiście możesz pokazać

68
00:05:56,970 --> 00:06:00,480
tekst zastępczy, jeśli nie masz miejsc, ale teraz

69
00:06:00,480 --> 00:06:03,360
tutaj, widzisz miejsca i jeśli

70
00:06:03,360 --> 00:06:06,570
kliknę na to, to jest ekran szczegółów.

71
00:06:06,750 --> 00:06:10,170
Teraz mam jeden problem z tym, że wygląda ładnie,

72
00:06:10,170 --> 00:06:10,890
to

73
00:06:10,980 --> 00:06:17,300
dobrze, ale jeśli kliknę na mapę, nic się nie wydarzy i oczywiście tam też chcę przejść

74
00:06:17,300 --> 00:06:23,650
do ekranu mapy, ale w sposób nieedytowalny, więc przejdź do ekranu mapy, nie mogąc go tam edytować.

75
00:06:23,750 --> 00:06:25,250
To pozostały element, który musimy

76
00:06:25,250 --> 00:06:25,880
dodać.