1
00:00:02,120 --> 00:00:07,100
Przejdę więc do ekranu przeglądu produktu, ponieważ zanim dodam nawigatora,

2
00:00:07,100 --> 00:00:09,590
chcę przynajmniej móc coś

3
00:00:09,590 --> 00:00:18,380
zobaczyć na tym ekranie, dlatego tutaj musimy teraz zaimportować selektor użycia z React Redux, ponieważ pozwoli nam to

4
00:00:18,380 --> 00:00:22,630
wejdź do sklepu Redux i stamtąd zdobądź nasze produkty.

5
00:00:22,640 --> 00:00:28,790
Więc w końcu możemy uzyskać nasze produkty i przechowywać je w stałych produktach, wywołując

6
00:00:28,790 --> 00:00:30,800
selektor use, a jak dowiedziałeś

7
00:00:30,800 --> 00:00:36,950
się w poprzednim module o zarządzaniu stanem w Redux, selektor use przyjmuje funkcję, która

8
00:00:36,950 --> 00:00:44,060
automatycznie odbiera stan , stan Redux jako dane wejściowe, które następnie zwracają wszelkie dane, które chcesz tam

9
00:00:44,060 --> 00:00:45,470
i tam

10
00:00:45,770 --> 00:00:47,360
w stanie Redux, chcę

11
00:00:47,360 --> 00:00:53,780
wykorzystać kawałek moich produktów i musisz użyć nazwy używanej tutaj w połączonych reduktorach, aby to

12
00:00:53,990 --> 00:00:57,990
uzyskać stan, dane zarządzane za pomocą produktów dla użytkownika.

13
00:00:58,010 --> 00:01:05,180
Więc tutaj powiem produkty stanowe, a teraz w tym fragmencie naszego stanu chcę uzyskać dostępne

14
00:01:06,220 --> 00:01:10,270
produkty, więc zdobądźmy. dostępne produkty tutaj i jest

15
00:01:10,270 --> 00:01:15,460
to ta składnia funkcji krótkiej strzałki, w której część po prawej stronie strzałki

16
00:01:15,460 --> 00:01:17,020
jest automatycznie zwracana.

17
00:01:17,020 --> 00:01:21,870
To właśnie jest teraz przechowywane w produktach i dlatego tutaj, na

18
00:01:21,880 --> 00:01:28,870
płaskiej liście, możemy oczywiście ustawić rekwizyt danych równy naszym produktom tutaj, które wybraliśmy, ponieważ będzie to

19
00:01:28,870 --> 00:01:31,790
tablica i dokładnie tego potrzebują dane.

20
00:01:31,810 --> 00:01:36,730
Dodam tutaj również ekstraktor kluczy, w zależności od używanej wersji React Native, nie będzie

21
00:01:36,790 --> 00:01:43,450
to potrzebne, ponieważ każdy produkt w naszej aplikacji ma identyfikator, a nowsze wersje płaskiej listy również szukają identyfikatora, a

22
00:01:43,450 --> 00:01:49,900
nie tylko klucz, ale jeśli pracujesz ze starszą wersją, musisz skonfigurować tę funkcję wyodrębniania klucza, a ta pobiera

23
00:01:49,900 --> 00:01:51,940
funkcję, która daje przedmiot, na który

24
00:01:51,940 --> 00:01:56,230
patrzy, i musisz powiedzieć, jaki powinien być twój unikalny klucz przedmiot

25
00:01:56,230 --> 00:02:00,100
i oczywiście to przedmiot. id, znowu, nowsze

26
00:02:00,160 --> 00:02:07,410
wersje React Native tego nie potrzebują. Teraz musimy również dostarczyć rekwizyt elementu

27
00:02:07,410 --> 00:02:14,720
renderującego, który wskazuje na funkcję, która renderuje nasze różne elementy listy, i tutaj zacznę

28
00:02:14,720 --> 00:02:21,650
proste i dopracujemy to później, a na razie zaimportuję komponent tekstowy z React

29
00:02:21,650 --> 00:02:25,590
Native i wypisz tytuł produktu w komponencie tekstowym.

30
00:02:25,610 --> 00:02:31,580
Więc tutaj otrzymujemy nasze dane pozycji, a wartość zwracana przez tę funkcję, którą musimy dostarczyć,

31
00:02:31,580 --> 00:02:33,580
aby renderować pozycję, powinna zwrócić

32
00:02:33,900 --> 00:02:35,780
element jsx na końcu.

33
00:02:35,810 --> 00:02:42,890
Więc tutaj zwrócę element tekstowy, a tam wyjdę itemData. pozycja. tytuł i mogę to zrobić, ponieważ

34
00:02:42,890 --> 00:02:48,680
dane produktu są odbierane przez React Native, to ma prop dla przedmiotu, to także coś, co

35
00:02:48,680 --> 00:02:53,000
daje React Native, a każdy przedmiot tutaj jest oczywiście tylko jednym przedmiotem

36
00:02:53,000 --> 00:02:58,640
w naszych produktach, dlatego jest tego typu danych i dlatego ma oczywiście tytuł prop, ponieważ to

37
00:02:58,640 --> 00:02:59,830
właśnie tutaj

38
00:02:59,960 --> 00:03:05,300
przypisuję, więc będziemy mieli tutaj propozycję tytułu, którą mogę wygenerować i oczywiście nie jest to

39
00:03:05,300 --> 00:03:10,100
końcowa forma tego, jak produkt powinien wyglądać w lista, ale to jest to,

40
00:03:10,100 --> 00:03:16,900
czego używam, aby zacząć, aby zobaczyć coś na ekranie. Mówiąc o ekranie, oczywiście jest czas na skonfigurowanie nawigatora,

41
00:03:16,900 --> 00:03:20,920
abyśmy naprawdę mogli zobaczyć coś na ekranie i że mamy ekrany.

42
00:03:21,160 --> 00:03:28,240
Stąd tutaj w folderze nawigacyjnym dodam mojego ShopNavigator. plik js i tam dodamy kilka nawigacji

43
00:03:28,240 --> 00:03:36,020
w tym module, więc na pewno będziemy musieli zaimportować z nawigacji React i oczywiście zacznę od zwykłego

44
00:03:36,050 --> 00:03:42,470
nawigatora stosu, który możemy utworzyć za pomocą utwórz funkcję nawigatora stosu, a następnie

45
00:03:42,470 --> 00:03:48,740
po prostu utworzymy ją tutaj, a ja nazwiebym ją nawigatorem produktów, to właśnie

46
00:03:48,860 --> 00:03:50,280
tutaj przechowuję, wynik

47
00:03:50,420 --> 00:03:51,700
utworzenia

48
00:03:51,710 --> 00:03:57,320
nawigatora stosu, a wynikiem jest komponent React, jeśli pamiętasz i jeśli pamiętasz

49
00:03:57,320 --> 00:04:03,800
, tworzenie nawigatora stosu przyjmuje obiekt JavaScript jako pierwszy argument, w którym mapujemy identyfikatory

50
00:04:03,860 --> 00:04:08,710
ekranu na komponenty React, które powinny być ładowane jako ekrany.

51
00:04:08,810 --> 00:04:16,040
Więc tutaj oczywiście zacznę od ekranu przeglądu produktów i importuję to z folderu ekranów

52
00:04:16,040 --> 00:04:23,930
i tam z części sklepu i tam z pliku ekranu przeglądu produktów, a zatem pierwszą rzeczą,

53
00:04:24,020 --> 00:04:26,120
którą chcę zmapować w

54
00:04:26,120 --> 00:04:33,630
tym nawigatorze stosów, są produkty przegląd lub jak chcesz to nazwać, który jest mapowany na ekran

55
00:04:33,640 --> 00:04:34,800
przeglądu produktów.

56
00:04:34,790 --> 00:04:41,510
Teraz oczywiście dla tego nawigatora stosu, który ostatecznie będzie miał wiele ekranów, przekażę również drugi argument,

57
00:04:41,510 --> 00:04:46,790
aby utworzyć nawigator stosu, który jest obiektem, który pozwala nam skonfigurować cały

58
00:04:47,180 --> 00:04:52,550
nawigator i tam możemy na przykład skonfigurować domyślne opcje nawigacji dla na każdym

59
00:04:52,550 --> 00:04:56,660
ekranie chcę ustawić kolor tła nagłówka i tak dalej.

60
00:04:57,350 --> 00:05:05,060
Więc tutaj ustawię obiekt JavaScript, w którym mogę ustawić styl nagłówka na inny obiekt JavaScript, w którym możemy ustawić kolor

61
00:05:05,060 --> 00:05:09,620
tła na dowolny wybrany przez Ciebie kolor, i to właśnie tutaj wejdzie

62
00:05:09,620 --> 00:05:16,000
do gry folder stałych, do którego dodam kolory. plik js, w którym po prostu chcę

63
00:05:16,010 --> 00:05:23,330
wyeksportować domyślny obiekt JavaScript z kolorem podstawowym i kolorem akcentującym i możesz nazwać te klawisze, jak chcesz,

64
00:05:23,330 --> 00:05:25,760
a teraz wybrałem kilka fajnych

65
00:05:25,760 --> 00:05:30,730
kolorów, których chcę tutaj użyć, ale możesz użyć dowolnego koloru chcieć.

66
00:05:30,920 --> 00:05:42,890
Moim podstawowym kolorem będzie kod szesnastkowy # c2185b, a kolor akcentowy ma

67
00:05:42,890 --> 00:05:46,940
kod szesnastkowy # ffc107.

68
00:05:47,130 --> 00:05:52,920
Dlatego teraz z powrotem w nawigatorze sklepu możemy importować z tego folderu stałych, nadal

69
00:05:54,020 --> 00:06:00,230
z kolorów, które znajdujemy w takim folderze stałych, a następnie tutaj, kolor tła, który ustawię dla

70
00:06:00,230 --> 00:06:04,240
stylu nagłówka, to kolory. podstawowy.

71
00:06:04,250 --> 00:06:07,470
Po dodaniu tego dodam również

72
00:06:07,530 --> 00:06:15,630
kolor odcienia nagłówka, który na przykład zabarwi tekst tytułowy, i ustawię go na biały,

73
00:06:16,470 --> 00:06:24,900
ponieważ ten podstawowy kolor, który ustawiłem, jest dość mocny różowo-czerwonawy, a zatem biały jest kolor, którego

74
00:06:24,900 --> 00:06:33,080
powinniśmy użyć, aby był dobrze czytelny i naprawdę chcę się różnić co do wyglądu nagłówka

75
00:06:33,080 --> 00:06:37,110
w zależności od platformy, na której działamy.

76
00:06:37,160 --> 00:06:44,450
Czas więc zaimportować platformę z React Native i jedną notatkę tutaj, w tej praktycznej aplikacji nie skupię

77
00:06:44,450 --> 00:06:49,700
się zbytnio na różnicach między platformami i responsywnym projekcie, zrobię to do

78
00:06:49,700 --> 00:06:55,160
pewnego stopnia, aby istniała podstawowa różnica między na różnych platformach i że aplikacja

79
00:06:55,190 --> 00:06:58,580
wygląda dobrze na różnych rozmiarach urządzeń, ale

80
00:06:58,790 --> 00:07:02,630
nie przetestuję jej na wielu różnych rozmiarach urządzeń.

81
00:07:02,660 --> 00:07:06,910
Nauczyłeś się wszystkiego, czego potrzebujesz, aby uczynić go tak responsywnym, jak

82
00:07:06,980 --> 00:07:12,230
to możliwe, więc zdecydowanie możesz zawsze modyfikować to bardziej niż ja tutaj w tym module.

83
00:07:12,230 --> 00:07:16,710
Na koniec chcę się tylko upewnić, że ten moduł nie zajmie setek

84
00:07:16,730 --> 00:07:19,250
godzin, dlatego ograniczę to do minimum.

85
00:07:19,250 --> 00:07:24,080
Przy takim zestawie platforma wydaje mi się ważna, ponieważ naprawdę chcę inaczej wyglądać nagłówek

86
00:07:24,440 --> 00:07:28,790
w zależności od tego, czy korzystamy z systemu iOS, czy Android.

87
00:07:28,790 --> 00:07:34,940
Kolor tła nie jest właściwie zawsze kolorem podstawowym, ale zamiast tego ustawię to tylko, jeśli system

88
00:07:34,940 --> 00:07:38,320
operacyjny, na którym działamy, to Android, w przeciwnym razie

89
00:07:38,360 --> 00:07:43,820
ustawię kolor tła na pusty ciąg znaków, co oznacza, że zostanie przyjęty domyślny i dlatego

90
00:07:43,820 --> 00:07:45,540
w przypadku koloru

91
00:07:45,570 --> 00:07:47,420
odcienia nagłówka kolor ten powinien

92
00:07:47,450 --> 00:07:54,780
być również biały, jeśli korzystamy z systemu Android, w przeciwnym razie nie ustawię go na pusty ciąg, ale zamiast

93
00:07:54,780 --> 00:07:57,720
tego chcę użyć koloru podstawowego jako koloru tekstu

94
00:07:57,720 --> 00:08:04,150
w systemie iOS, więc jeśli nie mamy Androida. Dzięki temu konfigurator nawigatora produktów jest skonfigurowany.

95
00:08:04,200 --> 00:08:09,240
Teraz, jak nauczyłeś się w module nawigacyjnym, nie eksportujesz tego nawigatora, ale

96
00:08:09,240 --> 00:08:14,940
umieszczasz go w kontenerze aplikacji, który tworzysz za pomocą funkcji tworzenia kontenera aplikacji

97
00:08:14,940 --> 00:08:16,970
uzyskanej z nawigacji React.

98
00:08:16,980 --> 00:08:24,510
Więc tutaj możemy teraz wyeksportować domyślny kontener aplikacji i przekazać nawigator produktów, tak jak to.

99
00:08:24,510 --> 00:08:27,510
To jest teraz skonfigurowana nawigacja eksportu i tego możemy teraz

100
00:08:27,630 --> 00:08:30,240
używać w aplikacji. js.

101
00:08:30,510 --> 00:08:37,260
Więc w aplikacji. js, możemy teraz zaimportować naszego nawigatora

102
00:08:39,770 --> 00:08:46,700
sklepu z nawigacji, nawigatora sklepu i właśnie tego używam tutaj w tagach mojego dostawcy,

103
00:08:46,700 --> 00:08:52,670
więc nawigator sklepu jest taki. Oznacza to również, że możemy pozbyć się importów React Native,

104
00:08:52,700 --> 00:09:00,020
ponieważ nie używamy już żadnego z tych komponentów React Native w tym komponencie. Przy całej tej pracy powinniśmy być

105
00:09:00,020 --> 00:09:07,130
teraz w stanie uruchomić naszą aplikację i, miejmy nadzieję, wylądować na ekranie przeglądu

106
00:09:07,130 --> 00:09:12,390
produktów, na którym widzimy podstawową, niestylizowaną listę tytułów produktów.

107
00:09:12,470 --> 00:09:17,840
Więc jeśli teraz to zapiszę, zapisz wszystkie te zmiany i upewnisz się, że masz

108
00:09:17,840 --> 00:09:20,520
npm zacząć działać i masz emulatory

109
00:09:20,870 --> 00:09:26,980
działające tam, gdzie to załadowałeś, otrzymuję błąd, że obiekt nie jest konstruktorem, oceniając domyślny nowy produkt.

110
00:09:26,980 --> 00:09:35,270
Problem powinien polegać na tym, że w folderze mojego modelu zapomniałem domyślnie wyeksportować klasę produktu.

111
00:09:35,300 --> 00:09:36,970
To oczywiście musi zostać dodane

112
00:09:36,980 --> 00:09:39,250
tutaj, w przeciwnym razie nie można importować z

113
00:09:39,290 --> 00:09:40,640
tego pliku, ma sens.

114
00:09:40,640 --> 00:09:42,670
Więc teraz to działa i

115
00:09:42,740 --> 00:09:44,780
teraz rzeczywiście widzę moje tytuły produktów.

116
00:09:44,780 --> 00:09:46,420
Widzimy także różne nagłówki,

117
00:09:46,430 --> 00:09:51,500
nie widzimy nagłówka, ponieważ go nie dodałem. Dlatego na ekranie przeglądu produktów

118
00:09:51,500 --> 00:09:57,770
możemy oczywiście dodać nasz specjalny ekran tylko opcje nawigacji, które zostaną połączone z

119
00:09:57,770 --> 00:10:04,490
domyślnymi opcjami nawigacji, które ustawiliśmy bezpośrednio w nawigatorze za pomocą ekranu przeglądu produktów, nasza stała

120
00:10:04,490 --> 00:10:10,050
tutaj, która przechowuje nasz komponent i dodaje właściwość opcji nawigacji i tutaj

121
00:10:10,070 --> 00:10:17,870
możemy w tej chwili użyć statycznych opcji nawigacji, dodać tytuł nagłówka i ustawić go na przykład dla

122
00:10:17,870 --> 00:10:19,630
wszystkich produktów, a

123
00:10:19,810 --> 00:10:24,470
jeśli teraz to zapiszemy, zobaczymy wszystkie produkty tutaj w nagłówku.

124
00:10:24,680 --> 00:10:28,870
Teraz wygląda to całkiem przyzwoicie, możemy zobaczyć nasze produkty.

125
00:10:28,970 --> 00:10:32,720
Oczywiście te produkty nie wyglądają tak, jak powinny, więc

126
00:10:32,720 --> 00:10:38,810
następnym krokiem będzie upewnienie się, że tutaj rzeczywiście uzyskamy wygląd, którego potrzebujemy w tej aplikacji.