1
00:00:02,160 --> 00:00:07,040
Pracujmy teraz na ekranie zamówień i wypiszmy więcej niż tylko ten nudny tekst.

2
00:00:07,040 --> 00:00:12,390
Teraz, podobnie jak w przypadku ekranu koszyka i ekranu przeglądu produktów, chcę bardziej złożonego

3
00:00:12,390 --> 00:00:17,970
przedmiotu zamówienia, dlatego utworzę osobny element zamówienia w folderze składników i tam w folderze sklepu.

4
00:00:18,000 --> 00:00:20,550
Jak zawsze to Ty decydujesz, czy

5
00:00:20,550 --> 00:00:26,420
to zrobisz, ale ponieważ nie będzie to super mały komponent, wolę mieć go w osobnym pliku.

6
00:00:26,550 --> 00:00:32,880
Więc zaimportuję React z React tutaj i nic dziwnego, że zaimportuję kilka rzeczy z React

7
00:00:32,880 --> 00:00:39,660
Native, a byłby to widok, tekst, arkusz stylów, ponieważ z pewnością skonfigurujemy również niektóre style, a także

8
00:00:39,990 --> 00:00:47,100
przycisk, ponieważ ja również chcemy mieć możliwość rozszerzenia zamówienia, abyśmy nie zawsze widzieli wszystkie elementy wchodzące w skład

9
00:00:47,100 --> 00:00:54,200
zamówienia, ale abyśmy mogli je zobaczyć, jeśli chcemy. Teraz dzięki temu możemy stworzyć tutaj stałą pozycji zamówienia, tak

10
00:00:54,290 --> 00:01:00,710
że będzie to sam komponent, który odbiera rekwizyty, a następnie w końcu będzie miał tutaj swoje ciało i zwróci

11
00:01:00,740 --> 00:01:08,460
trochę kodu jsx i potrzebujemy tutaj obiektu stylów z arkuszem stylów. Utwórz w ten sposób,

12
00:01:08,520 --> 00:01:13,990
a także domyślnie pozycję zamówienia eksportowego.

13
00:01:14,070 --> 00:01:16,460
Jak powinien wyglądać przedmiot zamówienia?

14
00:01:16,470 --> 00:01:23,280
Teraz, jak zawsze, to zależy od ciebie, ale będę pracować z widokiem tutaj i moim pomysłem jest to, że

15
00:01:23,280 --> 00:01:29,880
zawsze pokazuję jak całkowitą kwotę tego zamówienia i datę, a następnie przycisk pokaż szczegóły, który możemy nacisnąć, aby wyświetlić

16
00:01:29,880 --> 00:01:35,130
poszczególne elementy które są częścią zamówienia, a dla tych produktów faktycznie użyję tutaj elementu koszyka,

17
00:01:35,130 --> 00:01:39,620
ponieważ chcę renderować dokładnie te same elementy, które wyświetlam w koszyku.

18
00:01:39,690 --> 00:01:46,190
Więc faktycznie zaimportuję element koszyka z elementu koszyka i ponownie użyję tego elementu tutaj.

19
00:01:46,380 --> 00:01:48,400
Wróćmy jednak do tego kodu

20
00:01:48,540 --> 00:01:54,110
jsx, więc mamy widok zawijania wokół całego obiektu zamówienia, cały wpis naszego zamówienia tutaj.

21
00:01:54,270 --> 00:01:58,980
Teraz tam chcę mieć pierwszy wiersz i dlatego użyję innego widoku,

22
00:01:58,980 --> 00:02:06,660
abyśmy mogli odpowiednio stylizować ten tekst, który powinien zawierać tekst, który wyświetla naszą sumę, powiedzmy, sumę tego porządku, powiedzmy, i

23
00:02:06,660 --> 00:02:13,470
inny tekst, w którym pokażę data i powinna znajdować się w tym samym rzędzie, a odstęp między nimi.

24
00:02:14,370 --> 00:02:20,660
Pod nimi, jak już wspomniałem, powinien znajdować się przycisk, który możemy nacisnąć, aby wyświetlić szczegóły, które następnie pokazują wszystkie

25
00:02:20,660 --> 00:02:25,440
elementy, które są częścią tego zamówienia. Teraz, przy takiej konfiguracji,

26
00:02:25,470 --> 00:02:32,040
jasne jest, że kwota tutaj powinna być otrzymywana za pomocą rekwizytów.

27
00:02:32,040 --> 00:02:38,100
Tak więc spodziewam się, że dostanę rekwizyt ilościowy i zadzwonię do fixed 2, aby wyprowadzić odpowiednią liczbę

28
00:02:38,100 --> 00:02:40,350
miejsc dziesiętnych. Teraz, jeśli chodzi

29
00:02:40,350 --> 00:02:49,360
o datę, chcę podać datę rekwizytów tutaj, abyśmy mieli datę, którą możemy wygenerować. Jeśli chodzi o stylizację, ogólnie chcę tutaj przypisać

30
00:02:49,380 --> 00:02:55,860
styl elementu zamówienia, abyśmy mogli stylizować całe zamówienie, a potem tam, potrzebujemy,

31
00:02:55,860 --> 00:03:00,380
powiedzmy, podsumowania stylów, abyśmy mogli stylizować ten wiersz i

32
00:03:00,450 --> 00:03:09,240
odnośnie do tekstu tutaj, powinien mieć styl, powiedzmy, całkowitą kwotę, jak zawsze te identyfikatory stylu zależą od

33
00:03:09,300 --> 00:03:10,290
ciebie,

34
00:03:10,290 --> 00:03:12,720
tutaj chcę mieć styl daty.

35
00:03:16,000 --> 00:03:21,640
Przycisk powinien również mieć swój własny kolor, który otrzymam ze stałej kolorów, dlatego należy dodać ten

36
00:03:21,640 --> 00:03:22,830
import i

37
00:03:22,840 --> 00:03:26,130
tam użyję mojego podstawowego koloru. Okej, więc to wszystko

38
00:03:26,610 --> 00:03:27,430
na

39
00:03:27,450 --> 00:03:29,160
teraz, wrócę do szczegółów za

40
00:03:29,160 --> 00:03:36,380
chwilę, teraz zastosujmy tutaj stylizację, abyśmy mogli coś zobaczyć. W przypadku samego przedmiotu zamówienia ponownie użyję

41
00:03:36,480 --> 00:03:43,050
wyglądu koszyka, który już mam w produkcie, więc skopiuję wszystkie te ustawienia tutaj z produktu

42
00:03:43,050 --> 00:03:46,770
i przeniosę je na przedmiot zamówienia, aby zastosować

43
00:03:46,770 --> 00:03:51,770
cień , kolor tła, promień obramowania - wszystko to należy zastosować.

44
00:03:52,010 --> 00:03:57,210
Ponadto dodam margines 20 we wszystkich kierunkach, aby każdy element zamówienia miał trochę odstępów wokół niego.

45
00:03:58,790 --> 00:04:03,830
Wewnątrz przedmiotu zamówienia chcę też mieć wypełnienie o wartości 10, aby zawartość nie znajdowała

46
00:04:03,830 --> 00:04:10,800
się bezpośrednio na krawędziach otaczającej granicy i tak dalej. Teraz w podsumowaniu, które jest tym widokiem, który

47
00:04:10,800 --> 00:04:13,700
zawiera dwa fragmenty tekstu, tam stylizacja powinna

48
00:04:13,770 --> 00:04:17,940
być taka, że mamy oczywiście elastyczny kierunek rzędu, ponieważ przedmioty

49
00:04:17,940 --> 00:04:22,590
powinny siedzieć obok siebie. W treści uzasadnienia powinna

50
00:04:22,590 --> 00:04:31,230
znajdować się spacja, a poza tym wyrównywane elementy powinny być wyśrodkowane, tak aby na osi poprzecznej, która jest

51
00:04:31,230 --> 00:04:34,280
tutaj osią pionową, elementy były wyśrodkowane.

52
00:04:34,290 --> 00:04:40,160
Chcę również upewnić się, że zajmujemy tutaj pełną dostępną szerokość, aby rozpowszechniać tekst. Teraz, jeśli chodzi o całkowitą kwotę,

53
00:04:40,180 --> 00:04:47,620
jaką jest styl zastosowany do tego pierwszego fragmentu tekstu, który generuje ilość, tam, jak zawsze, możesz stylizować go,

54
00:04:47,830 --> 00:04:53,350
jak chcesz, ale ustawię rodzinę czcionek open sans pogrubioną, aby użyć tej odważnej

55
00:04:53,350 --> 00:05:01,180
wersji mojej czcionki i dajmy czcionkę o rozmiarze 16, powiedzmy, a następnie dla daty, która jest moim stylem, zastosowałem

56
00:05:01,180 --> 00:05:04,630
tutaj tekst tej daty, tam też w końcu

57
00:05:04,630 --> 00:05:10,840
chcę użyć czcionki o rozmiarze 16, ale rodzina czcionek będzie po prostu otwarta bez sansa,

58
00:05:10,840 --> 00:05:12,010
bez odważna

59
00:05:12,040 --> 00:05:20,800
wersja, a dodatkowo możemy tutaj również użyć tego ciemnoszarego koloru. Teraz spróbujmy i użyjmy tego elementu

60
00:05:20,810 --> 00:05:24,080
zamówienia na ekranie zamówień.

61
00:05:24,080 --> 00:05:29,480
Więc tam najpierw musimy zaimportować przedmiot zamówienia, a następnie oczywiście przejść do folderu

62
00:05:29,480 --> 00:05:34,970
komponentów, tam do folderu sklepu, a następnie zaimportować przedmiot zamówienia z tego pliku przedmiotu

63
00:05:34,970 --> 00:05:36,520
zamówienia i tutaj

64
00:05:36,710 --> 00:05:42,800
zamiast renderowania tego tekstu, teraz renderujemy ten element zamówienia tutaj jako tag samozamykający się i

65
00:05:42,800 --> 00:05:44,710
oczywiście musimy to skonfigurować.

66
00:05:44,720 --> 00:05:50,780
Wymaga to od nas podania kwoty i daty, a następnie również szczegółów, więc pozycje

67
00:05:50,780 --> 00:05:52,160
w kolejności, ale

68
00:05:52,190 --> 00:05:54,400
to nastąpi w drugim etapie.

69
00:05:54,410 --> 00:06:02,120
Więc na razie tutaj musimy podać kwotę, a to oczywiście po prostu itemData. element, który jest pojedynczym zamówieniem, nie zapomnij, że przeglądamy

70
00:06:02,120 --> 00:06:03,290
tutaj wszystkie

71
00:06:03,290 --> 00:06:07,020
zamówienia, które są tablicą zamówień, więc jest to pojedyncze

72
00:06:07,040 --> 00:06:08,260
zamówienie, a tam,

73
00:06:08,720 --> 00:06:15,030
jeśli spojrzymy na nasz model zamówień, jest przechowywany w pole kwoty całkowitej, data jest następnie

74
00:06:15,030 --> 00:06:16,830
zapisywana w polu daty.

75
00:06:16,850 --> 00:06:21,980
W tym miejscu uzyskujemy dostęp do pola całkowitej kwoty i dla propozycji daty, którą musimy również przekazać,

76
00:06:21,980 --> 00:06:28,070
możemy uzyskać dostęp do itemData. pozycja. data. Jeśli teraz to

77
00:06:28,070 --> 00:06:37,940
zapiszemy i przyjrzymy się temu, dodajmy tutaj trochę treści, zamów to, a następnie przejdź do ekranu naszych zamówień i otrzymamy ten błąd.

78
00:06:38,030 --> 00:06:42,980
Odnosi się to teraz do obiektów, które nie są prawidłowe, jak powinien React, i

79
00:06:42,980 --> 00:06:50,010
pokazuje nam, że ostatecznie jest to obiekt stanu, z którym ma problem, i ma to sens, ponieważ data w naszej kolejności,

80
00:06:50,010 --> 00:06:54,540
gdy tworzymy ją tutaj w naszym sklepie Redux, jest datą Javascript obiekt.

81
00:06:54,650 --> 00:06:58,150
Teraz nie możemy wyprowadzać tego jako takiego tekstu. Aby go wydrukować,

82
00:06:58,160 --> 00:07:03,230
możemy przejść do naszego modelu, który jest w końcu schematem, którego używamy

83
00:07:03,820 --> 00:07:09,830
do tworzenia zamówień, aw modelu zamówień możemy zrobić coś, czego wcześniej nie robiliśmy, możemy dodać

84
00:07:10,070 --> 00:07:15,650
do tego metodę model, a ściślej, getter, który jest domyślną funkcją Javascript współczesnego Javascript.

85
00:07:15,650 --> 00:07:21,200
Więc tutaj możemy użyć słowa kluczowego get, a następnie dowolnej wybranej nazwy, takiej jak czytelna data,

86
00:07:21,200 --> 00:07:26,330
która jest jak funkcja, ale nie funkcja, którą wywołujesz jak funkcję, ale do której masz

87
00:07:26,330 --> 00:07:32,600
dostęp jak właściwość na końcu, która zwraca obliczoną wartość i tam Chcę zwrócić tę datę, więc obiekt daty, który

88
00:07:32,600 --> 00:07:40,100
jest przechowywany dla tego obiektu, ale następnie możemy wywołać locale ciąg daty, który jest wbudowaną metodą Javascript, której możemy użyć na obiektach daty,

89
00:07:40,130 --> 00:07:46,790
aby przekonwertować ten obiekt na datę czytelną dla człowieka. Tam przekazujemy język, dla którego chcemy na

90
00:07:46,790 --> 00:07:52,190
przykład zoptymalizować go w ten sposób, a teraz możemy to skonfigurować za pomocą

91
00:07:52,220 --> 00:07:58,100
drugiego argumentu, którym jest obiekt JavaScript. Tam możesz zdefiniować, w jaki

92
00:07:58,100 --> 00:08:03,260
sposób rok powinien zostać skonfigurowany i załączony, znajdziesz szczegółowe dokumenty

93
00:08:03,260 --> 00:08:11,020
dla tej metody, jeśli chcesz dowiedzieć się wszystkiego o tym, a na przykład możemy ustawić rok

94
00:08:14,470 --> 00:08:22,980
na numeryczny, miesiąc na długi, dzień na numeryczny, godzina do dwóch cyfr i minuta również do dwóch cyfr.

95
00:08:23,160 --> 00:08:28,650
Teraz mamy tę czytelną właściwość daty, do której możemy uzyskać dostęp do dowolnego elementu

96
00:08:29,190 --> 00:08:34,960
zamówienia i na razie na ekranie zamówień, zamiast przekazywać obiekt danych w ten sposób, uzyskuję

97
00:08:35,010 --> 00:08:41,520
dostęp do czytelnej daty, która jest teraz tą nową właściwością gettera, którą dodaliśmy i co teraz zobaczysz, że

98
00:08:41,520 --> 00:08:48,960
jeśli ponownie złożę to zamówienie, klikając teraz zamówienie i teraz przejdę do moich zamówień, teraz zobaczysz całkowitą kwotę i tę

99
00:08:48,960 --> 00:08:55,320
czysto sformatowaną datę, a teraz, jeśli zrobię to samo na Androidzie i złożę zamówienie tutaj i idę

100
00:08:55,320 --> 00:09:02,130
do ekranu moich zamówień, widzisz tam to samo. Teraz chcę tylko trochę ulepszyć ten przycisk, ogólnie także

101
00:09:02,130 --> 00:09:09,840
na iOS, nie powinien być tak szeroki, nie tak szeroki tutaj. Więc w komponencie zamówienia, w którym mam ten przycisk, w

102
00:09:09,840 --> 00:09:21,750
końcu możemy tutaj wyświetlić ten widok, możemy dodać wyrównywanie elementów do środka, aby wyśrodkować zawartość wzdłuż osi poprzecznej od lewej do prawej, a zatem teraz, jeśli spróbuję to ponownie i składam

103
00:09:21,750 --> 00:09:28,550
to zamówienie i przechodzę do zamówień, widzicie, że nie można go tam nacisnąć i jest jeszcze wyraźniej na

104
00:09:28,550 --> 00:09:32,760
Androidzie, jeśli go tam załadujemy i naprawdę szybko złożę to zamówienie,

105
00:09:35,950 --> 00:09:43,060
przejdź do ekranu zamówień, teraz mamy ten przycisk. Teraz oczywiście celem jest, aby po

106
00:09:43,060 --> 00:09:50,530
naciśnięciu tego przycisku kolejność rozwijała się tutaj. Przy okazji zauważysz, że ta data nie

107
00:09:50,530 --> 00:09:53,460
jest wyświetlana poprawnie, więc

108
00:09:53,470 --> 00:09:56,970
to kolejna rzecz, którą musimy naprawić.

109
00:09:57,050 --> 00:10:02,240
Teraz przyczyną tego niepoprawnego wyświetlania jest sposób, w jaki React Native działa wewnętrznie, który

110
00:10:02,300 --> 00:10:08,810
silnik JavaScript używa wewnętrznie i ten, którego używa dla Androida tam lub na platformach Android, po prostu

111
00:10:08,810 --> 00:10:13,980
nie obsługuje tej przyjemnej metody lokalizacji łańcucha daty, której tu używam .

112
00:10:14,180 --> 00:10:17,500
Silnik używany na iOS działa, ale

113
00:10:17,510 --> 00:10:23,030
na Androidzie, tak nie jest, co jest oczywiście niewygodne i niezbyt świetne.

114
00:10:23,030 --> 00:10:26,030
Co możemy zrobić na Androidzie, aby to naprawić?

115
00:10:26,030 --> 00:10:34,610
Rozwiązaniem jest zainstalowanie oddzielnej biblioteki, która nazywa się momentem. js, zainstalowaliśmy z npm install -

116
00:10:34,610 --> 00:10:36,440
zapisz moment.

117
00:10:36,740 --> 00:10:39,580
Jest to biblioteka innej firmy, która będzie

118
00:10:39,590 --> 00:10:43,830
działać na obu platformach, dzięki czemu formatowanie dat jest również bardzo proste.

119
00:10:44,420 --> 00:10:47,000
Poczekajmy więc na zakończenie tej instalacji.

120
00:10:47,090 --> 00:10:53,400
Teraz, gdy jest zainstalowany, importujesz wszystko od razu i z właśnie zainstalowanej biblioteki, a teraz

121
00:10:53,570 --> 00:10:56,530
możesz go użyć w tym pliku tutaj.

122
00:10:56,540 --> 00:11:03,950
Teraz możemy to tutaj skomentować i zamiast tego zwrócić moment, wykonany jak funkcja i przekazać

123
00:11:03,950 --> 00:11:05,030
to. date,

124
00:11:05,050 --> 00:11:12,800
więc obiekt daty, który chcemy sformatować i wywołać format. Teraz format zajmuje ciąg, w którym możesz skonfigurować sposób formatowania tego i

125
00:11:12,800 --> 00:11:16,880
załączony, znajdziesz również link do oficjalnych dokumentów, w których możesz dowiedzieć się

126
00:11:16,880 --> 00:11:19,330
wszystkiego o możliwościach, które tam masz.

127
00:11:19,360 --> 00:11:26,760
Teraz tutaj, jeden przykład, jeden sposób sformatowania tego, powiedzmy długi miesiąc, który robisz z 4

128
00:11:26,770 --> 00:11:34,570
dużymi Ms, a następnie o, aby mieć ładnie sformatowaną datę w tym miesiącu, wynik w

129
00:11:34,570 --> 00:11:44,730
każdym dniu, rok reprezentowany przez cztery cyfry i wtedy godzina zawsze jest reprezentowana przez dwie cyfry i minuty, a teraz, jeśli

130
00:11:45,180 --> 00:11:47,160
to zapiszemy i spróbujemy,

131
00:11:47,180 --> 00:11:56,250
zacznij od iOS, dodaj to tutaj do koszyka, przejdź do koszyka i zamów to, a teraz przejdź do

132
00:11:56,250 --> 00:11:57,840
zamówień, to wygląda

133
00:11:57,840 --> 00:11:58,870
dobry.

134
00:11:59,040 --> 00:12:02,440
A teraz, jeśli wypróbujemy to również na Androidzie, zamówimy

135
00:12:02,730 --> 00:12:06,860
to, a następnie przejdziemy do zamówień, teraz też wygląda to ładnie.

136
00:12:06,960 --> 00:12:10,610
Teraz to drobna poprawka, teraz popracujmy nad przyciskiem

137
00:12:10,740 --> 00:12:17,220
i nadaj mu trochę odstępów, oprócz zmniejszenia jego rozmiaru, i można to zrobić, przechodząc do podsumowania

138
00:12:17,220 --> 00:12:22,260
tutaj, które jest stylem stosowanym do widoku zawierającego dwa fragmenty tekstu, tam możemy

139
00:12:22,260 --> 00:12:29,190
po prostu dodać margines na dole powiedzmy 15, abyśmy mieli trochę odstępu między tym wierszem podsumowania, którym

140
00:12:29,190 --> 00:12:36,540
jest ten wiersz tekstu u góry, a przyciskiem poniżej. Więc dodam to do mojego koszyka tutaj, zamów to, a następnie wróć tutaj, przejdź do zamówień,

141
00:12:36,690 --> 00:12:37,750
teraz wygląda to dobrze.

142
00:12:37,770 --> 00:12:39,300
Teraz upewnijmy się, że

143
00:12:39,300 --> 00:12:41,000
przycisk pokaż szczegóły również coś robi.