1
00:00:02,430 --> 00:00:05,640
Więc zacznijmy pracę nad tą aplikacją. W tym celu

2
00:00:05,760 --> 00:00:08,270
mam tutaj zupełnie nową aplikację, znajdziesz

3
00:00:08,280 --> 00:00:12,390
ją dołączoną na wypadek, gdybyś chciał zbudować tę samą aplikację startową.

4
00:00:12,420 --> 00:00:19,020
Ta prosta aplikacja daje nam to tutaj, bardzo brzydką aplikację, w której mamy tekst, który nakłada się

5
00:00:19,020 --> 00:00:21,440
na pasek stanu, na wcięcie.

6
00:00:21,450 --> 00:00:26,800
Teraz moglibyśmy to naprawić za pomocą widoku obszaru zapisywania, jak się dowiedziałeś wcześniej, ale nie będziemy

7
00:00:26,820 --> 00:00:33,210
tego musieli, ponieważ i tak nie zatrzymamy tej zawartości i użyjemy biblioteki innej firmy, która pozwala nam łatwo nawigować między

8
00:00:33,210 --> 00:00:36,530
różnymi ekranami i uzyskiwać ładne animacje po drodze, abyśmy nie

9
00:00:36,690 --> 00:00:38,310
musieli się tym przejmować, a

10
00:00:38,310 --> 00:00:44,610
ta biblioteka innych firm będzie również zarządzać wycięciem na urządzeniu i da nam ten obszar zapisywania od razu po

11
00:00:44,610 --> 00:00:45,880
wyjęciu z pudełka.

12
00:00:45,900 --> 00:00:52,230
Zanim jednak dodamy tę bibliotekę innej firmy, zacznijmy pisać kod, ponieważ możemy nawigować między

13
00:00:52,230 --> 00:00:56,020
ekranami tylko wtedy, gdy mamy wiele ekranów.

14
00:00:56,040 --> 00:01:01,950
W tym celu utworzę tutaj nowy folder ekranów i już również utworzę

15
00:01:01,950 --> 00:01:07,830
folder składników, różnica będzie taka, że w folderze ekranów mamy te składniki

16
00:01:07,860 --> 00:01:15,420
React, które następnie wykorzystujemy jako pełne ekrany zamiast tego w folderze składników będziemy mieć składniki, których

17
00:01:15,420 --> 00:01:16,430
używamy

18
00:01:16,440 --> 00:01:23,280
na naszych ekranach, więc na przykład, gdy mamy tę siatkę kategorii posiłków, kategorii żywności,

19
00:01:23,280 --> 00:01:30,200
wówczas nasz element siatki byłby składnikiem, całą siatką, całymi kategoriami żywności ekran byłby jednak

20
00:01:30,450 --> 00:01:37,530
ekranem i myślę, że ma to sens. Teraz, jak naszkicowałem, zgodnie z planem, w tej aplikacji będziemy potrzebować kilku ekranów, a ja

21
00:01:37,530 --> 00:01:43,860
już utworzę wszystkie pliki i oczywiście wypełnimy je życiem w tym module. Będziemy potrzebować ekranu kategorii i nazwiemy

22
00:01:43,890 --> 00:01:49,440
ekran kategorii plików, aby było naprawdę jasne, co jest w

23
00:01:49,440 --> 00:01:50,200
środku.

24
00:01:50,250 --> 00:01:57,270
To jest ekran, na którym możemy wybrać kategorię taką jak włoski, niemiecki, amerykański, więc gdzie możemy

25
00:01:57,270 --> 00:02:04,170
wybrać kategorię żywności, więc dodamy treść, która to odzwierciedla, dodamy taką siatkę na tym ekranie, na

26
00:02:04,230 --> 00:02:06,420
tym ekranie składnik później.

27
00:02:06,420 --> 00:02:14,100
Teraz, gdy wybieramy kategorię, zobaczymy listę posiłków, które pasują do tej kategorii i nazwiemy ten ekran, który

28
00:02:14,100 --> 00:02:20,190
następnie zobaczymy, do którego przejdziemy, ekran kategorii posiłków, ponieważ jest to ekran, który

29
00:02:20,190 --> 00:02:23,390
się ładuje posiłki dla wybranej kategorii.

30
00:02:23,460 --> 00:02:28,240
To kolejny ekran, którego potrzebujemy i kolejny ekran, do którego będziemy mogli nawigować.

31
00:02:28,320 --> 00:02:35,100
Teraz potrzebujemy również ekranu ulubionych, który zawiera wszystkie nasze ulubione przepisy, nasze ulubione posiłki,

32
00:02:35,100 --> 00:02:42,300
a także potrzebujemy MealDetailScreen, to ekran, który widzimy, jeśli dotkniemy jednego posiłku w wybranej

33
00:02:42,300 --> 00:02:48,390
kategorii lub na ulubiony ekran. To pokazuje nam składniki i

34
00:02:48,390 --> 00:02:51,120
szczegółowe kroki tego posiłku.

35
00:02:51,120 --> 00:02:58,020
Teraz i co najważniejsze, będziemy potrzebować ekranu filtrów, a ten ekran filtrów to ekran, który pozwala nam

36
00:02:58,020 --> 00:03:05,700
ustawić filtry, takie jak wegańskie jedzenie, dzięki czemu widzimy tylko przepisy, które są wegańskie lub wegetariańskie, bezglutenowe lub bez laktozy,

37
00:03:05,790 --> 00:03:08,110
będą to cztery kategorie, które

38
00:03:08,130 --> 00:03:14,950
będę mieć w tej aplikacji, więc są to ekrany. Teraz dodamy składniki tak, jak ich potrzebujemy,

39
00:03:15,040 --> 00:03:18,410
i nie dodamy wszystkich plików z

40
00:03:18,430 --> 00:03:25,390
góry, dzięki czemu mamy bardzo podstawową konfigurację, której potrzebujemy tutaj, chociaż oczywiście wszystkie nasze

41
00:03:25,720 --> 00:03:31,330
ekrany są całkowicie puste. Teraz wypełnimy je krok po kroku większą ilością życia,

42
00:03:31,330 --> 00:03:34,160
ale przynajmniej chcę skonfigurować podstawowy komponent na każdym z tych ekranów.

43
00:03:34,390 --> 00:03:40,000
Zacznę od ekranu kategorii i oczywiście musimy tam zaimportować React z React, ponieważ

44
00:03:40,000 --> 00:03:46,750
zbudujemy komponent React, a także zaimportujemy coś z React Native, ponieważ oczywiście zbudujemy tutaj komponent React

45
00:03:47,050 --> 00:03:52,600
korzystający z niektórych komponentów React Native. Mówiąc ściślej, zacznę tutaj prosto i

46
00:03:52,630 --> 00:03:58,110
zaimportuję widok i tekst z React Native, a następnie utworzę mój komponent, ekran kategorii w

47
00:03:58,120 --> 00:04:04,630
tym przypadku, który przyjmuje rekwizyty lub który może otrzymywać rekwizyty przynajmniej dlatego, że jest to jednak normalny komponent

48
00:04:04,630 --> 00:04:11,530
React i gdzie wyeksportuję to jako mój domyślny komponent. Dodam również arkusz stylów, ponieważ są szanse,

49
00:04:11,530 --> 00:04:16,870
że będziemy go potrzebować, a jeśli nie, nadal możemy go usunąć później.

50
00:04:16,870 --> 00:04:19,150
Więc skonfiguruję tutaj swoje style

51
00:04:19,150 --> 00:04:22,060
z tworzeniem arkusza stylów, w ten sposób.

52
00:04:22,330 --> 00:04:26,440
Jest to więc bardzo podstawowy komponent React, jednak niczego

53
00:04:26,440 --> 00:04:32,730
nie renderuje, więc tutaj wewnątrz funkcji komponentu będziemy musieli coś zwrócić, a czymś jest

54
00:04:32,770 --> 00:04:39,920
jakiś kod jsx, w którym chcę renderować widok, a tam tekst i tutaj mówię ekran kategorii.

55
00:04:40,240 --> 00:04:49,270
Teraz dam też temu widokowi styl, w którym mówię style. ekran, z bardzo podstawowym układem ekranu lub stylem ekranu tutaj,

56
00:04:49,270 --> 00:04:56,260
w którym ustawiam flex na jeden, a następnie uzasadniam zawartość, aby wyśrodkować i wyrównuję elementy do środka,

57
00:04:56,260 --> 00:04:58,980
a jak się dowiedziałeś, zrobi to

58
00:04:59,080 --> 00:05:04,850
jedno, spowoduje wyśrodkowanie zawartości na ekranie, więc ostatecznie wyśrodkuje ten tekst na ekranie.

59
00:05:04,960 --> 00:05:09,880
To jest podstawowy komponent i skopiuję tę zawartość na wszystkie inne ekrany i oczywiście

60
00:05:09,910 --> 00:05:14,920
nie jest to końcowa treść, którą tam będziemy, tylko trochę obojętnych treści, abyśmy mogli

61
00:05:14,920 --> 00:05:19,210
zacząć nawigować między niektórymi z tych ekranów i zobaczyć coś .

62
00:05:19,210 --> 00:05:25,900
Mamy tutaj ekran kategorii posiłków, tutaj jest ten składnik i dlatego musimy go

63
00:05:25,900 --> 00:05:37,880
wyeksportować tutaj i tutaj, dlatego powiem taki ekran kategorii posiłków. Teraz dodam to również do ekranu ulubionych i zmienię nazwę na

64
00:05:37,880 --> 00:05:41,650
ekran ulubionych, a więc oczywiście eksportuję ulubiony

65
00:05:41,690 --> 00:05:43,700
ekran tu i potem,

66
00:05:43,700 --> 00:05:45,000
mogę

67
00:05:45,110 --> 00:05:48,720
powiedzieć ekran ulubionych, skopiować go na ekran

68
00:05:48,740 --> 00:05:53,060
filtrów i zrobić to samo, to jest to.

69
00:05:53,080 --> 00:05:55,920
na ekranie filtrów, zmieniłem jego

70
00:05:55,940 --> 00:06:02,240
nazwę i wyeksportowałem to, a także w naszym tekście mówię o ekranie

71
00:06:02,390 --> 00:06:06,110
filtrów, a na koniec jest to MealDetailScreen.

72
00:06:06,110 --> 00:06:09,000
Więc tutaj mamy MealDetailScreen,

73
00:06:09,740 --> 00:06:15,140
ja też nazwiemy go MealDetailScreen tutaj i wyeksportuję MealDetailScreen.

74
00:06:15,140 --> 00:06:19,930
Dzięki temu mamy wszystko ustawione na tych ekranach, teraz prawie

75
00:06:20,060 --> 00:06:23,390
skończyliśmy wszystkie przygotowania, chcę tylko dodać

76
00:06:23,450 --> 00:06:29,240
specjalne czcionki do tej aplikacji, a następnie przejdziemy od razu do dodania nawigacji.