1
00:00:02,160 --> 00:00:05,140
Dla tego modułu i dla tej

2
00:00:05,160 --> 00:00:11,310
aplikacji, którą tworzymy, ponownie znajdziesz wstępny projekt dołączony do tego wykładu, którego możesz użyć, aby

3
00:00:11,310 --> 00:00:15,480
zacząć z tym, lub możesz samodzielnie stworzyć nową aplikację expo.

4
00:00:15,480 --> 00:00:21,300
Teraz jest to aplikacja, którą załączyłem, bardzo podstawowa aplikacja z twoją aplikacją, której ledwo widzimy, co nie ma znaczenia, ponieważ i

5
00:00:21,330 --> 00:00:23,980
tak nie będziemy przechodzić przez ten tekst i mamy

6
00:00:24,160 --> 00:00:26,370
tylko jedną aplikację. plik js.

7
00:00:26,430 --> 00:00:32,130
Teraz wiele rzeczy, które robię w tym module, to rzeczy, które widziałeś w poprzednich modułach, ponieważ oczywiście jest

8
00:00:32,130 --> 00:00:33,660
to główna idea tutaj.

9
00:00:33,660 --> 00:00:39,480
Przećwiczymy to, czego się nauczyliśmy do tej pory i pojawią się nowe rzeczy lub wzorce,

10
00:00:39,480 --> 00:00:41,710
które również mogą Cię zainteresować.

11
00:00:41,730 --> 00:00:47,160
Teraz oczywiście w tej aplikacji, którą naszkicowałem na ostatnim wykładzie, będziemy mieli kilka ekranów, więc na

12
00:00:47,160 --> 00:00:52,230
pewno potrzebujemy nawigacji, a zatem dodam folder nawigacji, aby móc tam zapisać moją konfigurację nawigacji

13
00:00:52,230 --> 00:00:54,380
i to oczywiście tylko jedna możliwa

14
00:00:54,420 --> 00:00:57,480
konfiguracja, jak wspomniałem wcześniej, możesz pracować z dowolną strukturą

15
00:00:57,480 --> 00:01:03,690
folderów, która Ci odpowiada i która działa dla Ciebie. Oprócz folderu nawigacyjnego chcę również mieć

16
00:01:03,690 --> 00:01:04,740
tutaj

17
00:01:04,740 --> 00:01:09,690
folder ekranów, w tym folderze ekranów chcę również przechowywać ekrany,

18
00:01:09,690 --> 00:01:15,660
między którymi można nawigować, i dodam folder składników dla wszystkich moich zwykłych

19
00:01:15,660 --> 00:01:18,460
składników, oczywiście ekrany są również

20
00:01:18,520 --> 00:01:24,450
React komponenty, ale normalne komponenty, o których tu mówię, to komponenty, których

21
00:01:24,450 --> 00:01:30,720
nie ładujemy bezpośrednio jako ekrany, ale które osadzamy w ekranach zamiast lub w

22
00:01:30,720 --> 00:01:37,500
innych komponentach, więc to będziemy mieli tutaj. Dodam również folder stałych, ponieważ ponownie

23
00:01:37,500 --> 00:01:43,860
będę pracować z moimi stałymi kolorami, aby móc używać wybranych kolorów w całej aplikacji.

24
00:01:43,880 --> 00:01:49,280
Teraz jest wiele różnych sposobów na rozpoczęcie pracy. To, co lubię robić najpierw w moich

25
00:01:49,280 --> 00:01:51,020
aplikacjach, to to, że

26
00:01:51,020 --> 00:01:56,870
zaczynam od ekranów, nawet jeśli nie dodam jeszcze zawartości do wszystkich, lubię dodawać ten ogólny strukturę, dzięki

27
00:01:56,870 --> 00:02:01,570
czemu zawsze mogę zobaczyć, nad czym nadal muszę pracować, których funkcji wciąż brakuje.

28
00:02:01,880 --> 00:02:04,980
Dlatego dodam ekrany, które będę miał w tej aplikacji

29
00:02:05,180 --> 00:02:09,890
i tutaj zrobię coś, czego wcześniej nie robiłem i co jest całkowicie opcjonalne, ale

30
00:02:09,890 --> 00:02:12,120
uporządkuję ekrany w osobne podfoldery.

31
00:02:12,170 --> 00:02:15,770
Będę miał jeden folder z ekranami związanymi ze sklepem

32
00:02:15,770 --> 00:02:20,930
i oczywiście, ponieważ zbudujemy aplikację do zakupów, wszystkie ekrany są związane ze sklepem, ale

33
00:02:20,930 --> 00:02:26,540
tutaj chcę mieć ekrany, które bezpośrednio pomagają nam w oglądaniu naszych produktów, z dodawaniem ich

34
00:02:26,540 --> 00:02:27,120
do

35
00:02:27,530 --> 00:02:34,430
koszyka i tak dalej, a następnie chcę mieć osobny folder i to jest mój folder użytkownika, można powiedzieć, że

36
00:02:34,430 --> 00:02:36,400
chcę mieć ekrany powiązane z

37
00:02:36,470 --> 00:02:40,370
użytkownikiem, aby były to moje produkty użytkownika i produkty administracyjne.

38
00:02:40,440 --> 00:02:42,590
Tak to podzielę, ale

39
00:02:42,590 --> 00:02:45,950
oczywiście możesz to zorganizować tak, jak chcesz.

40
00:02:45,950 --> 00:02:52,670
Na przykład w folderze sklepu chcę mieć ekran przeglądu moich produktów. Będzie to ekran, który zobaczymy, gdy

41
00:02:52,760 --> 00:02:58,340
aplikacja załaduje się tam, gdzie mamy wszystkie produkty do pracy i gdzie możemy następnie

42
00:02:58,340 --> 00:03:04,880
wybrać produkt lub bezpośrednio go dodać do koszyka Będziemy zatem potrzebować również ekranu szczegółów produktu, czyli ekranu, który

43
00:03:04,880 --> 00:03:10,520
widzimy, gdy wybieramy produkt i chcemy dowiedzieć się więcej o nim, a następnie możemy go kliknąć

44
00:03:10,520 --> 00:03:16,940
lub dotknąć i przejść do tego ekranu szczegółów. Będziemy też potrzebować ekranu wózka, co nie jest zaskakujące,

45
00:03:16,940 --> 00:03:22,430
gdy widzimy go, gdy dodamy do koszyka przedmiot lub nie, który następnie widzimy, ale który możemy

46
00:03:22,430 --> 00:03:23,000
odwiedzić,

47
00:03:23,000 --> 00:03:24,440
aby zobaczyć przedmiot, więc

48
00:03:25,470 --> 00:03:30,600
możemy to zrobić, a ja Dodam również ekran zamówień, w którym możemy zobaczyć nasze zamówienia.

49
00:03:30,600 --> 00:03:35,730
Teraz możesz przy okazji argumentować, że ekran koszyka i ekran zamówienia należą do folderu użytkownika, ponieważ

50
00:03:35,730 --> 00:03:39,450
są one w pewnym stopniu wyłączne dla użytkownika, każdy użytkownik ma

51
00:03:39,450 --> 00:03:44,340
swoje własne zamówienia i własny koszyk, a zatem możesz przejść w obie strony, Uważam, że

52
00:03:44,340 --> 00:03:47,970
są nieco bardziej związani ze stroną związaną z produktem sklepowym, ale

53
00:03:47,970 --> 00:03:51,960
znowu, to zależy od ciebie. W folderze użytkownika

54
00:03:51,960 --> 00:03:58,980
chcę mieć ekran moich produktów użytkownika, aby był to ekran, na którym widzę listę wszystkich produktów

55
00:03:59,040 --> 00:04:06,570
należących do tego użytkownika oraz ekran edycji produktu, który jest ekranem, którego użyjemy do dodania nowego produktów

56
00:04:06,690 --> 00:04:08,710
lub do edycji istniejących produktów,

57
00:04:08,730 --> 00:04:10,940
będziemy mogli ich ponownie użyć.

58
00:04:11,160 --> 00:04:13,490
Są to ekrany, nad którymi będziemy

59
00:04:13,500 --> 00:04:20,280
pracować w tym module i nie zapełnimy ich teraz od razu życiem, zamiast tego będziemy pracować nad tym

60
00:04:20,280 --> 00:04:20,990
krok

61
00:04:21,000 --> 00:04:23,090
po kroku, ale tego potrzebujemy.

62
00:04:23,220 --> 00:04:27,450
Oczywiście istnieje również inny folder, który możemy już dodać i jest to folder

63
00:04:27,450 --> 00:04:32,820
sklepu, w którym będziemy zarządzać naszym sklepem Redux i naszym stanem Redux, dlatego jest to nasz system

64
00:04:32,820 --> 00:04:38,070
zarządzania stanem, z którym chcę pracować, z którym oczywiście potrzebujemy, ponieważ mamy wiele ekrany, które muszą

65
00:04:38,070 --> 00:04:44,280
działać na rodzaj powiązanych danych, dlatego musimy zarządzać tymi danymi, naszymi produktami i tym, co jest w koszyku itd.

66
00:04:44,280 --> 00:04:45,090
na pewnym

67
00:04:45,090 --> 00:04:48,200
poziomie globalnym, a Redux jest do tego naprawdę świetny,

68
00:04:48,240 --> 00:04:53,520
więc na pewno będziemy tego potrzebować . Z tego samego powodu musimy również zainstalować niektóre pakiety,

69
00:04:53,550 --> 00:05:00,900
więc uruchomię npm install - zapisz i zainstaluj Redux, a także React Redux. Będziemy także potrzebować React -navigation,

70
00:05:00,900 --> 00:05:07,480
ponieważ oczywiście dodamy ponownie nawigację, abyśmy już mogli tam wrzucić.

71
00:05:07,500 --> 00:05:14,540
Dodam również przyciski React-nawigacja-nagłówek, ponieważ dodam tutaj przyciski nagłówka i chcę mieć te ładnie

72
00:05:14,550 --> 00:05:19,380
stylizowane i pozycjonowane przyciski bez konieczności samodzielnego pozycjonowania stylizacji

73
00:05:19,380 --> 00:05:22,650
i to powinno być na razie.

74
00:05:22,950 --> 00:05:28,770
Więc zainstaluję już wszystkie te pakiety, będziemy potrzebować ich w tym

75
00:05:28,770 --> 00:05:36,570
module, a po zainstalowaniu tych pakietów i utworzeniu tych podstawowych plików, mamy solidną podstawową konfigurację na początek.

76
00:05:36,580 --> 00:05:41,820
Teraz oprócz tych pakietów musimy również zainstalować dwa inne pakiety

77
00:05:41,820 --> 00:05:49,050
za pomocą komendy expo install, a to jest funkcja obsługi-gest-native-gest-handler, więc instalacja expo React-native-gest-handler,

78
00:05:49,050 --> 00:05:55,800
a także pakiet reagujący-native-ożywiony . Oba pakiety należy również zainstalować za

79
00:05:55,980 --> 00:05:58,800
pomocą komendy expo install.

80
00:05:58,860 --> 00:06:02,100
Teraz oczywiście chodzi o wypełnienie tego życiem i tam

81
00:06:02,190 --> 00:06:06,720
chcę zacząć od pierwszego ekranu, który faktycznie pokaże, który jest ekran przeglądu produktów.