1
00:00:02,410 --> 00:00:07,070
Tak więc dla tego dołączonego modułu ponownie znajdziesz prosty projekt początkowy.

2
00:00:07,090 --> 00:00:09,640
Tam masz aplikację. plik js z pustym

3
00:00:09,790 --> 00:00:11,680
widokiem, więc nie dzieje się tam zbyt wiele.

4
00:00:11,770 --> 00:00:16,870
Dostajesz folder stałych z podstawowym kolorem, który dla ciebie skonfigurowałem i to wszystko.

5
00:00:16,870 --> 00:00:21,010
Poza tym nie ma tu nic ciekawego, jest to bardzo

6
00:00:21,010 --> 00:00:25,320
podstawowa aplikacja, której teraz użyjemy do zbudowania tej aplikacji, którą właśnie naszkicowałem.

7
00:00:25,420 --> 00:00:28,930
Teraz oczywiście możesz absolutnie iść do przodu i samodzielnie

8
00:00:28,930 --> 00:00:34,870
zbudować podstawy, więc te trzy różne ekrany, których w końcu potrzebujemy, lub cztery różne ekrany, jeden dla

9
00:00:34,870 --> 00:00:40,390
wszystkich miejsc, jeden dla szczegółów miejsca, jeden dla stworzenia nowego miejsce i jeden dla mapy pełnoekranowej,

10
00:00:40,390 --> 00:00:45,590
którą również chcemy pokazać, możesz to absolutnie zrobić i samodzielnie zbudować szkielet podstawowy dla tych

11
00:00:45,590 --> 00:00:51,100
ekranów, skonfigurować podstawową nawigację, ponieważ są to oczywiście wszystkie rzeczy, które zrobiliśmy już wiele razy

12
00:00:51,370 --> 00:00:52,600
W tym kursie.

13
00:00:52,750 --> 00:00:57,310
Zacznę też od następnych wykładów na wypadek, gdybyś chciał pójść dalej lub porównać

14
00:00:57,310 --> 00:01:01,000
swoje rozwiązanie z kopalnią, a potem zagłębimy się w

15
00:01:01,090 --> 00:01:10,510
treść tego modułu, dowiemy się, jak dodać możliwości natywnych urządzeń . Zacznijmy zatem od podstaw.

16
00:01:10,510 --> 00:01:17,080
Dodam nowy ekran folderów z czterema ekranami, które chcę mieć. Byłby to plik

17
00:01:17,080 --> 00:01:28,360
ekranu listy miejsc, plik ekranu szczegółów miejsca, nowy plik ekranu miejsca, a także ekran mapy, na którym możemy zobaczyć cały ekran map,

18
00:01:28,360 --> 00:01:33,770
a ja wypełnię je treścią w tym module, ale są to

19
00:01:33,820 --> 00:01:36,970
cztery podstawowe ekrany, których potrzebuję.

20
00:01:36,970 --> 00:01:43,460
Dodam również folder nawigacyjny, abyśmy mogli tam skonfigurować nawigację i tutaj

21
00:01:43,470 --> 00:01:51,030
skonfiguruję mój PlacesNavigator. plik js. Teraz w podanym przeze mnie projekcie początkowym

22
00:01:51,450 --> 00:01:52,920
nawigacja React i

23
00:01:52,920 --> 00:01:56,720
wszystkie jego zależności są już zainstalowane, więc jeśli go używasz, nie

24
00:01:58,260 --> 00:02:03,480
musisz go ręcznie instalować, w przeciwnym razie, jeśli używasz własnego projektu początkowego, upewnij się, że zainstaluj

25
00:02:03,480 --> 00:02:09,660
React navigation z npm install React navigation, a także upewnij się, że zainstalowałeś tutaj te dodatkowe zależności, aby

26
00:02:09,660 --> 00:02:12,280
upewnić się, że React navigation działa z expo.

27
00:02:12,330 --> 00:02:19,290
Tak więc po zainstalowaniu możemy oczywiście ustawić nawigację tutaj w nawigatorze miejsc, a do tego

28
00:02:19,380 --> 00:02:24,150
tutaj zaimportuję z nawigacji React, a importuję oczywiście funkcję tworzenia

29
00:02:26,730 --> 00:02:31,020
nawigatora stosu, więc utwórz nawigator stosu i utwórz

30
00:02:31,020 --> 00:02:37,110
również kontener aplikacji, który również musimy wykonać, ponieważ będziemy musieli zrobić jedno i

31
00:02:37,110 --> 00:02:41,580
drugie - utwórz nawigator stosów i skonfiguruj kontener aplikacji później.

32
00:02:41,580 --> 00:02:46,830
Teraz musimy również zaimportować ekrany, z którymi chcemy pracować, a byłby to ekran listy miejsc, który

33
00:02:47,070 --> 00:02:53,640
zaimportuję z folderu ekranów i tam jest ekran listy miejsc. Będziemy również potrzebować ekranu szczegółów miejsca,

34
00:02:53,640 --> 00:02:59,910
ekranu szczegółów miejsca, który jest importowany z ekranów ekranu szczegółów miejsca, a

35
00:02:59,910 --> 00:03:02,850
także, oczywiście, pozostałych dwóch ekranów.

36
00:03:02,850 --> 00:03:12,800
Więc otrzymaliśmy nowy ekran miejsca z ekranów, nowy ekran miejsca i wreszcie, musimy również zaimportować tutaj nasz ekran

37
00:03:12,830 --> 00:03:18,770
mapy z folderu ekranów, a następnie byłby to ekran mapy.

38
00:03:18,770 --> 00:03:26,800
Teraz możemy skonfigurować tutaj nawigator stosu, a ja będę przechowywać ten nawigator miejsc w sposób ciągły,

39
00:03:26,990 --> 00:03:31,440
a jak się tego nauczyłeś, mapujemy identyfikatory na

40
00:03:31,550 --> 00:03:38,720
nasze ekrany, więc może mamy identyfikator miejsc zamapowany na ekranie listy miejsc , mamy

41
00:03:38,840 --> 00:03:41,180
przypisany identyfikator szczegółów miejsca

42
00:03:41,180 --> 00:03:49,300
do ekranu szczegółów miejsca, mamy także nowy identyfikator miejsca zmapowany na nowy ekran miejsca i na

43
00:03:49,330 --> 00:03:57,040
koniec, być może, mapowany na ekran mapy. Dzięki temu możemy ustawić tutaj domyślne opcje nawigacji, więc

44
00:03:57,130 --> 00:04:02,680
przekażę drugi argument i oczywiście ustawienie to jest całkowicie opcjonalne, ale w związku z tym

45
00:04:02,680 --> 00:04:09,970
dodam domyślne opcje nawigacji do każdego ekranu i chcę zdefiniować moje styl nagłówka tutaj i upewnij się, że używamy koloru

46
00:04:09,970 --> 00:04:14,010
tła w zależności od tego, czy działamy na Androidzie, czy nie.

47
00:04:14,140 --> 00:04:21,880
Dlatego zaimportuję ten interfejs API platformy z React Native i będę również potrzebował mojego koloru, więc zaimportuję

48
00:04:21,910 --> 00:04:30,790
również kolory ze stałych / kolorów, to również jest wymagane, ponieważ dzięki temu możemy teraz sprawdzić, czy system operacyjny platformy

49
00:04:30,790 --> 00:04:37,120
to Android a jeśli tak, możemy upewnić się, że kolor tła nagłówka jest naszym

50
00:04:37,120 --> 00:04:39,400
kolorem podstawowym, w przeciwnym

51
00:04:39,580 --> 00:04:46,600
razie nie ustawię żadnego koloru, chcę użyć domyślnego przezroczystego wyglądu, którego używa iOS, a tutaj również

52
00:04:46,600 --> 00:04:53,080
ustawić kolor odcienia nagłówka dla tekst tam, ponownie sprawdzam platformę, ponieważ jeśli platforma jest

53
00:04:53,080 --> 00:04:59,560
Androidem, ponieważ mamy solidne tło, ustawię kolor odcienia na biały, dla iOS zrobię coś

54
00:04:59,590 --> 00:05:06,520
przeciwnego, tam ustawię go na mój kolor podstawowy. Teraz to tutaj, nie mam niestandardowych czcionek w tym

55
00:05:06,520 --> 00:05:12,790
projekcie, oczywiście możesz je dodać, jeśli chcesz. Dzięki tej konfiguracji możemy wyeksportować nasz kontener aplikacji, który musimy

56
00:05:12,790 --> 00:05:21,230
w związku z tym utworzyć za pomocą Utwórz kontener aplikacji i przekazać tutaj nawigator miejsc. Teraz jest to konfiguracja nawigacji, oczywiście

57
00:05:21,230 --> 00:05:24,620
w aplikacji.

58
00:05:24,620 --> 00:05:24,620
plik js możemy teraz z niego korzystać.

59
00:05:24,620 --> 00:05:32,200
Więc tutaj powinniśmy zaimportować nawigatora miejsc z folderu nawigacji, nawigatora miejsc, dlatego nie potrzebujemy już importu widoku

60
00:05:32,240 --> 00:05:39,920
tutaj i możemy po prostu zwrócić nawigator miejsc. Ponieważ nie ładuję żadnych niestandardowych czcionek, nie muszę

61
00:05:39,920 --> 00:05:44,540
też robić tej aplikacji ładującej rzeczy, które zrobiliśmy wcześniej lub

62
00:05:44,540 --> 00:05:49,610
w innych modułach, tutaj mogę po prostu zwrócić to od samego początku.

63
00:05:51,500 --> 00:05:58,660
Teraz na tych ekranach tutaj, na ekranie listy miejsc, zaimportuję React z React, zaimportuję kilka rzeczy z React

64
00:05:58,700 --> 00:06:01,190
Native, prawdopodobnie widok, tekst i arkusz

65
00:06:01,220 --> 00:06:02,070
stylów,

66
00:06:02,120 --> 00:06:08,570
a następnie możemy sprawdzić, czy potrzebujemy czegoś innego później z React Native, a następnie ustaw tutaj

67
00:06:08,600 --> 00:06:15,740
stałą, ekran listy miejsc jest normalnym składnikiem React, który otrzymuje rekwizyty i którego koniec zwraca pewną treść,

68
00:06:15,740 --> 00:06:19,550
tutaj po prostu zwrócę widok z tekstem ekranu listy

69
00:06:19,550 --> 00:06:24,330
miejsc, więc tylko niektóre zawartość fikcyjna na razie, a także skonfiguruj tutaj

70
00:06:24,590 --> 00:06:30,230
arkusz stylów za pomocą arkusza stylów. utwórz i ostatecznie

71
00:06:31,190 --> 00:06:34,800
wyeksportuj ekran listy miejsc.

72
00:06:34,800 --> 00:06:37,420
Będzie to szkielet podstawowy, którego możemy użyć do każdego

73
00:06:37,430 --> 00:06:40,880
widoku, więc upuszczę go w każdym widoku i po prostu dostosuję tę nazwę tutaj.

74
00:06:40,880 --> 00:06:48,250
Mamy tutaj ekran szczegółów miejsca, którego chcę użyć, a następnie skopiuj go również na nowym ekranie miejsca

75
00:06:48,850 --> 00:06:52,720
i zastąp tę nazwę tutaj we wszystkich trzech

76
00:06:52,720 --> 00:06:58,300
miejscach, a także upuść to na ekranie mapy, aby mieć to tutaj jako

77
00:06:58,300 --> 00:07:02,650
no i oczywiście dodamy prawdziwą treść do tego modułu.

78
00:07:02,800 --> 00:07:05,530
Więc to są utworzone ekrany, jeśli

79
00:07:05,530 --> 00:07:12,190
teraz to zapiszemy i uruchomisz to z npm start lub expo start i uruchomisz na

80
00:07:12,220 --> 00:07:18,660
swoim ulubionym emulatorze lub emulatorach, po zakończeniu budowy powinniśmy zobaczyć ekran listy miejsc na

81
00:07:18,990 --> 00:07:21,020
końcu, jak to.

82
00:07:21,120 --> 00:07:26,790
Oczywiście nie mamy tutaj tytułu nagłówka, więc upewnijmy się, że go ustawimy, także na Androidzie,

83
00:07:27,180 --> 00:07:34,830
przechodząc do ekranu listy miejsc, a tam możemy dodać opcje nawigacji na ekranie listy miejsc i ustawić go na obiekt

84
00:07:34,830 --> 00:07:42,690
statyczny tutaj, w którym możemy dodać tytuł nagłówka wszystkich miejsc lub coś w tym stylu, a wraz z tym oczywiście, gdy

85
00:07:42,690 --> 00:07:47,840
to się ponownie załaduje, zobaczymy ten tytuł tutaj na ekranie listy miejsc.

86
00:07:48,030 --> 00:07:55,260
To podstawowa konfiguracja ekranu, której będziemy potrzebować w tym module tutaj. Dzięki temu, zanim zagłębimy się głębiej w

87
00:07:55,260 --> 00:07:58,530
treść innych ekranów, upewnijmy się, że

88
00:07:58,650 --> 00:08:04,020
w nagłówku mamy również przycisk plus, który przeniesie nas do

89
00:08:04,020 --> 00:08:10,770
nowego ekranu miejsca, ponieważ wtedy możemy zacząć od dotknięcia w natywne funkcje urządzenia

90
00:08:10,770 --> 00:08:13,010
i dodawanie miejsc.

91
00:08:13,090 --> 00:08:20,200
Teraz oczywiście wiesz, jak dodać przycisk do nagłówka nawigatora, wszystko, co musisz zrobić, to zainstalować nowy pakiet

92
00:08:20,200 --> 00:08:27,040
z npm install --save, a to jest pakiet nagłówka przycisków reagowania, którego użyliśmy kilka razy w trakcie

93
00:08:27,040 --> 00:08:32,170
tego kursu i użyję go dokładnie tak samo, jak użyłem go w

94
00:08:32,170 --> 00:08:33,790
pozostałej części kursu.

95
00:08:33,880 --> 00:08:39,880
Stworzę więc folder komponentów, w którym mogę skonfigurować własny

96
00:08:40,000 --> 00:08:51,020
komponent przycisku nagłówka, aby mieć ten wstępnie skonfigurowany komponent przycisku wielokrotnego użytku, aw tym komponencie importuję przycisk

97
00:08:51,080 --> 00:09:02,460
nagłówka z właśnie zainstalowanego pakietu przycisków nagłówka React. Zaimportuj Ionicony z expo / vector-icons, pakietu, który możesz chcieć

98
00:09:02,510 --> 00:09:07,110
zainstalować na wypadek, gdybyś dostał tutaj błędy przy

99
00:09:07,110 --> 00:09:18,840
instalacji npm - zapisz, a także zaimportuj stałą kolorów z folderu constans, a tam, plik kolorów, a następnie tutaj mam zwykły przycisk

100
00:09:18,840 --> 00:09:24,870
niestandardowego nagłówka, który odbiera rekwizyty, które zwracają trochę jsx, a tutaj

101
00:09:24,880 --> 00:09:31,260
chcę zwrócić przycisk nagłówka, który importujemy, ale teraz skonfigurujemy go zgodnie z

102
00:09:31,260 --> 00:09:32,750
naszymi wymaganiami.

103
00:09:33,000 --> 00:09:39,240
Po pierwsze, przesyłając do niej wszystkie rekwizyty, a następnie możemy ustawić komponent ikony na

104
00:09:39,270 --> 00:09:40,480
jonowy, aby

105
00:09:40,590 --> 00:09:47,250
był używany, ustaw rozmiar ikony może na 23, ponieważ myślę, że do tej pory działał

106
00:09:47,250 --> 00:09:48,870
całkiem dobrze i

107
00:09:48,870 --> 00:09:57,240
ustawiłem kolor, a teraz ja Będę potrzebować jeszcze jednego importu, będę musiał zaimportować platformę z React Native, ponieważ teraz chcę

108
00:09:57,600 --> 00:09:59,940
sprawdzić platformę tutaj, a jeśli

109
00:10:01,560 --> 00:10:07,470
platforma jest Androidem, będziemy mieli solidne tło, więc chcę użyć bieli jako kolor ikony,

110
00:10:07,800 --> 00:10:10,680
w przeciwnym razie używam mojego podstawowego koloru.

111
00:10:10,740 --> 00:10:16,080
Teraz wystarczy tylko wyeksportować ten niestandardowy przycisk nagłówka tutaj i teraz możemy zacząć używać

112
00:10:16,080 --> 00:10:20,600
go na ekranie listy miejsc. Tam, tak jak poprzednio,

113
00:10:20,610 --> 00:10:29,280
importuję dwa inne pakiety z przycisków reaguj-nawigacja-nagłówek, dwie inne rzeczy z tego pakietu, i to będą moje przyciski

114
00:10:29,280 --> 00:10:36,480
nagłówka i element, oba muszą zostać zaimportowane, a ponadto możemy również zaimportować nasz własny niestandardowy

115
00:10:36,480 --> 00:10:42,810
przycisk nagłówka teraz z folderu składników i tam z tego pliku przycisku

116
00:10:42,810 --> 00:10:48,060
nagłówka, nad którym właśnie pracowaliśmy. Ale po zaimportowaniu możemy zmienić nasze

117
00:10:48,060 --> 00:10:53,880
opcje nawigacji tutaj na dynamiczne, w których mamy tę funkcję, która daje nam dane nawigacyjne

118
00:10:54,270 --> 00:11:00,750
i która następnie ostatecznie zwraca ten obiekt konfiguracyjny, ponieważ pozwoli nam to również powiązać przycisk z jakąś

119
00:11:00,750 --> 00:11:07,380
funkcją, która otrzymujemy za pomocą parametrów trasy, ponieważ tutaj chcę dodać nagłówek w prawo, aby dodać moje przyciski

120
00:11:07,380 --> 00:11:12,540
nagłówka i oczywiście jest to również wzór, który robiliśmy wiele razy w tym

121
00:11:12,540 --> 00:11:19,560
kursie, dodaliśmy takie przyciski nagłówka i mamy tam element. Na komponencie przycisków nagłówka możemy ustawić komponent przycisku

122
00:11:19,590 --> 00:11:27,330
nagłówka i wskazać tutaj nasz niestandardowy komponent przycisku nagłówka, a na elemencie ustawiamy teraz tytuł, np. Dodaj

123
00:11:27,330 --> 00:11:31,930
miejsce i ustawiamy tutaj nazwę ikony, która zależy od platformy,

124
00:11:32,010 --> 00:11:39,870
więc dlatego faktycznie zaimportuję ten interfejs API platformy z React Native i możemy teraz sprawdzić, czy system operacyjny

125
00:11:39,960 --> 00:11:48,090
platformy to Android, jeśli tak jest, to chcę ustawić to na md add, w przeciwnym razie na ios

126
00:11:48,240 --> 00:11:52,560
add, który dodaje przycisk plus dla konkretna platforma, więc zgodnie

127
00:11:52,560 --> 00:11:58,290
ze specyficznym wyglądem tej platformy. Musimy również dodać funkcję onPress, a

128
00:11:58,290 --> 00:12:05,160
jeśli to klikniemy, po prostu chcę tutaj nawigować za pomocą metody navigate i dlatego musimy mieć

129
00:12:05,160 --> 00:12:11,310
tę dynamiczną funkcję tutaj, aby uzyskać dostęp do danych nawigacyjnych, a następnie nawigacji,

130
00:12:11,430 --> 00:12:19,990
nawiguj do nowego miejsca, a nowym miejscem tutaj jest oczywiście mój identyfikator w nawigatorze miejsc na ekranie nowego miejsca.

131
00:12:20,040 --> 00:12:24,780
Dzięki temu mamy możliwość przejścia do tego ekranu, a zatem jeśli to uratujemy, powinniśmy być w

132
00:12:24,780 --> 00:12:25,960
stanie to zrobić.

133
00:12:26,100 --> 00:12:32,800
Oczywiście pojawia się błąd, ponieważ w moim komponencie przycisku nagłówka, ponieważ mam tam komponent React, importowanie React

134
00:12:32,920 --> 00:12:38,680
z React nie wydaje się najgorszym pomysłem, więc szybko naprawmy to tutaj w

135
00:12:38,680 --> 00:12:45,290
komponencie przycisku nagłówka, ale teraz z tym , ponieważ ładuje się ponownie, mamy ten przycisk plus

136
00:12:45,290 --> 00:12:51,760
i możemy przejść do ekranu nowych miejsc, do nowego ekranu miejsc, oczywiście także tutaj na Androidzie.

137
00:12:51,980 --> 00:12:57,680
Teraz na tym nowym ekranie miejsca możemy dodać opcje nawigacji, aby ustawić tytuł, nowe

138
00:12:58,070 --> 00:13:04,010
opcje nawigacji ekranu miejsca, ustawić na chwilę jakiś obiekt statyczny, ponieważ w tej chwili nie

139
00:13:04,010 --> 00:13:11,210
potrzebujemy tej funkcji, nie nie potrzebuję dostępu do danych nawigacyjnych, wystarczy ustawić tytuł nagłówka, aby dodać miejsce, a

140
00:13:11,930 --> 00:13:17,340
jeśli to zapiszemy, oczywiście, jeśli tam przejdziemy, zobaczymy ten tytuł w nagłówku.

141
00:13:17,540 --> 00:13:20,440
To jest ta podstawowa konfiguracja tutaj, teraz

142
00:13:20,570 --> 00:13:25,430
możemy pracować nad ekranem dodawania miejsca, aby upewnić się, że możemy dodać miejsce.