1
00:00:02,470 --> 00:00:09,580
Zastąpmy tutaj zawartość fałszywego ekranu kategorii siatką kategorii, ponieważ w końcu taki jest

2
00:00:09,580 --> 00:00:13,090
pomysł tego ekranu. Teraz możemy

3
00:00:13,090 --> 00:00:18,140
użyć komponentu, którego używaliśmy wcześniej, a mianowicie FlatList.

4
00:00:18,160 --> 00:00:20,980
Do tej pory używaliśmy tego do normalnych

5
00:00:20,980 --> 00:00:25,490
list, możesz też renderować siatki za jego pomocą i właśnie to zrobimy tutaj.

6
00:00:25,730 --> 00:00:34,960
Teraz na tym ekranie kategorii zamienię wszystko na FlatList tutaj i wypiszę tylko moją płaską listę tutaj na tym ekranie, który wrócę

7
00:00:34,960 --> 00:00:35,530
na

8
00:00:35,530 --> 00:00:42,520
końcu i ustawię tutaj kolumny num, które są nową właściwością, której wcześniej nie widzieliśmy do 2, a

9
00:00:42,520 --> 00:00:47,950
to określa, ile kolumn chcemy mieć. Domyślna wartość to 1, która jest

10
00:00:47,950 --> 00:00:53,610
normalną listą, ale możesz mieć w niej więcej niż jedną kolumnę, co daje efektywną siatkę.

11
00:00:53,620 --> 00:00:55,080
Teraz możemy renderować siatkę,

12
00:00:55,090 --> 00:00:57,070
ale oczywiście potrzebujemy do tego danych,

13
00:00:57,070 --> 00:00:59,640
w przeciwnym razie trudno jest renderować siatkę, prawda?

14
00:01:00,590 --> 00:01:06,290
W tym celu dodam nowy folder, w którym nadam nazwę danym, a tam dodam dane pozorowane. plik js, ponieważ w końcu

15
00:01:06,290 --> 00:01:10,040
to tylko fikcyjne dane, które tutaj dostarczam, nie

16
00:01:10,040 --> 00:01:16,740
ładujemy go teraz z serwera ani nic podobnego, po prostu ładujemy w ten sposób.

17
00:01:16,920 --> 00:01:23,340
Chcę mieć kilka kategorii i do tego dodam jeszcze jeden folder, który nazywam modelami, który jest w końcu

18
00:01:23,520 --> 00:01:29,550
folderem, w którym chcę określić, w jaki sposób moje dane są kształtowane w tej aplikacji, jak to

19
00:01:29,550 --> 00:01:30,440
wygląda .

20
00:01:30,450 --> 00:01:36,810
Tak więc możemy dodać kategorię. Na przykład w pliku js, w

21
00:01:36,840 --> 00:01:43,920
tym pliku chcę tylko nazwę klasy, a kategorie to domyślne funkcje JavaScript we współczesnym Javascript,

22
00:01:44,040 --> 00:01:52,800
które eksportuję, i tam po prostu zdefiniuję, jak powinien wyglądać obiekt kategorii w mojej aplikacji tak, że w

23
00:01:52,920 --> 00:01:59,110
zasadzie mamy łatwiejszy sposób tworzenia tych obiektów bez pomyłek i tak dalej.

24
00:01:59,130 --> 00:02:05,670
Więc tutaj ta klasa kategorii pobierze konstruktor i możesz użyć tego konstruktora, który jest domyślną metodą, którą

25
00:02:05,700 --> 00:02:06,610
możesz dodać

26
00:02:06,630 --> 00:02:11,790
do dowolnej klasy w JavaScript w celu zainicjowania obiektu opartego na tej klasie.

27
00:02:12,000 --> 00:02:16,350
Robisz to, oczekując argumentów w konstruktorze i dla kategorii. Chcę uzyskać identyfikator kategorii,

28
00:02:16,350 --> 00:02:22,200
tytuł i kolor, którego użyję jako kolor tła w siatce dla tego elementu siatki dla tej kategorii. i

29
00:02:22,200 --> 00:02:23,880
będę przechowywać wszystkie te

30
00:02:24,060 --> 00:02:29,460
dane we właściwościach za pomocą tego słowa kluczowego. Jeśli jest to dla Ciebie

31
00:02:29,460 --> 00:02:35,670
zupełnie nowe, zdecydowanie zanurz się najpierw w kursach lub zasobach JavaScript, ponieważ nie ma

32
00:02:35,670 --> 00:02:38,550
to nic wspólnego z nawigacją React

33
00:02:38,580 --> 00:02:42,470
ani z React Native, jest to waniliowy nowoczesny Javascript.

34
00:02:42,480 --> 00:02:44,470
Dlaczego to stworzyłem?

35
00:02:44,490 --> 00:02:52,650
Ponieważ teraz mogę zaimportować swoją klasę kategorii z folderu modeli z kategorii. Plik js do pliku danych zastępczych, a następnie

36
00:02:52,650 --> 00:02:56,460
użyj go do utworzenia danych zastępczych.

37
00:02:56,460 --> 00:03:04,650
Teraz znajdujesz te fałszywe dane w załączeniu, w załączniku znajdujesz plik JavaScript z tymi sztucznymi kategoriami, które przechowuję

38
00:03:04,860 --> 00:03:09,070
w stałej, którą następnie eksportuję jako eksport nazwany tutaj.

39
00:03:09,240 --> 00:03:14,200
To są dane pozorne kategorii dla kategorii w tej aplikacji, w tych kategoriach

40
00:03:14,520 --> 00:03:19,290
chcę mieć w tej aplikacji. Są to kategorie, których będę używać

41
00:03:19,290 --> 00:03:25,590
w tej aplikacji i są to kategorie, których możemy teraz używać w naszych ekranach, a dokładniej w ekranie kategorii.

42
00:03:26,540 --> 00:03:37,110
Chcę tam dodać kategorie importu i importu z danych / fikcyjnych danych, więc importuję tę nazwaną

43
00:03:37,120 --> 00:03:40,640
stałą, którą tam eksportujemy.

44
00:03:40,660 --> 00:03:44,020
To jest w końcu tablica obiektów Javascript, prawda?

45
00:03:44,050 --> 00:03:45,610
To właśnie tam przechowujemy,

46
00:03:45,640 --> 00:03:51,850
to tylko tablica obiektów JavaScript, których możemy teraz użyć do renderowania naszej listy lub, mówiąc ściślej,

47
00:03:51,850 --> 00:03:53,090
naszej siatki tutaj.

48
00:03:53,170 --> 00:04:01,240
Tak więc dane dla tej FlatList są po prostu tablicami kategorii, więc po prostu wskażę

49
00:04:01,240 --> 00:04:08,510
kategorie i oczywiście potrzebujemy również elementu renderującego, aby zdefiniować sposób renderowania pojedynczego elementu

50
00:04:08,510 --> 00:04:15,380
siatki, który komponent powinien być renderowany. W tym celu dodam tutaj nową funkcję, renderuj

51
00:04:15,380 --> 00:04:22,580
element siatki, która jest funkcją, która na końcu odbierze dane elementu i która powinna zwrócić

52
00:04:22,580 --> 00:04:25,460
element jsx, powinna zwrócić tutaj

53
00:04:25,460 --> 00:04:33,950
część React i wskazać na siatkę renderowania pozycja tutaj. Teraz tam wyrenderuję widok i dla uproszczenia, na razie będzie to widok z tekstem

54
00:04:33,950 --> 00:04:40,160
w środku i w tym tekście chcę wyrenderować itemData.

55
00:04:40,160 --> 00:04:42,400
item, to jest to, co

56
00:04:42,410 --> 00:04:48,250
mamy dostępne na FlatList, jeśli pamiętasz wcześniejsze moduły, obiekt danych elementu ma tutaj właściwość

57
00:04:48,250 --> 00:04:55,520
item, React Native FlatList daje tę właściwość, a tam będziemy mieli właściwość title, ponieważ przedmiot jest dostanie

58
00:04:55,520 --> 00:05:01,940
się tutaj jest tylko kategorią, którą otrzymujemy z naszych danych, które karmimy na FlatList, więc

59
00:05:01,970 --> 00:05:05,490
będziemy mieli taki obiekt JavaScript jako element, a

60
00:05:05,630 --> 00:05:12,000
ten obiekt JavaScript jest oparty na naszym modelu tu i tam tytuł, kolor i właściwość

61
00:05:12,040 --> 00:05:12,820
ID,

62
00:05:12,980 --> 00:05:19,160
stąd mamy właściwość tytuł, stąd możemy wyodrębnić tytuł tutaj w ten sposób, użyjemy koloru później.

63
00:05:20,250 --> 00:05:22,010
Więc to

64
00:05:22,080 --> 00:05:26,850
pierwsza rzecz, powinna działać. Teraz w nowych wersjach

65
00:05:26,850 --> 00:05:35,340
React Native nie musisz również informować React Native, że Twój identyfikator nie ma nazwy klucz, ale faktycznie ma

66
00:05:35,400 --> 00:05:42,270
nazwę ID, ponieważ nowsze wersje React Native akceptują identyfikator jako identyfikator na danych listy.

67
00:05:42,270 --> 00:05:48,300
Jeśli podążasz za starszą wersją, musisz dodać tutaj ekstraktor kluczy, który jest funkcją, która pobiera element

68
00:05:48,630 --> 00:05:54,660
i indeks i musi zwrócić wartość, która powinna być użyta jako klucz, więc w tym przypadku

69
00:05:54,720 --> 00:05:56,980
być przedmiotem. id, znowu

70
00:05:57,030 --> 00:06:03,030
nowsze wersje React Native nie potrzebują tego, ale tylko w celach informacyjnych i dla starszych

71
00:06:03,030 --> 00:06:05,150
wersji, nadal dodam to tutaj.

72
00:06:05,160 --> 00:06:08,610
Więc teraz zwracamy naszą FlatList z naszymi danymi.

73
00:06:08,610 --> 00:06:11,930
Jeśli teraz to zachowamy, powinniśmy już zobaczyć nasze

74
00:06:11,940 --> 00:06:15,320
dane tutaj, oczywiście nie tak piękne, ale siatka,

75
00:06:15,330 --> 00:06:16,960
mamy włoski, obok

76
00:06:17,040 --> 00:06:20,000
szybkie i łatwe hamburgery, obok niemiecki, to

77
00:06:20,130 --> 00:06:23,690
po prostu nie wygląda jak siatka ale technicznie jest.

78
00:06:24,030 --> 00:06:32,250
Teraz, aby wyglądał bardziej jak siatka, oczywiście musimy dodać więcej stylizacji. Teraz, aby nieco zmienić tę stylizację, możemy przejść do naszych

79
00:06:32,250 --> 00:06:33,080
elementów

80
00:06:33,090 --> 00:06:40,830
siatki tutaj, do pojedynczego elementu siatki i dodać prop stylu tutaj i dodać styl elementu siatki lub cokolwiek, co

81
00:06:40,830 --> 00:06:42,620
chcesz nazwać, a następnie

82
00:06:43,430 --> 00:06:50,700
tam na dole, dodam element siatki do mojego arkusza stylów i nadaj tę właściwość flex, chcemy zająć tyle

83
00:06:50,700 --> 00:06:52,250
miejsca, ile to możliwe,

84
00:06:53,390 --> 00:06:57,530
zapisz to, teraz to już wygląda trochę bardziej jak siatka.

85
00:06:57,530 --> 00:07:00,640
Teraz margines wokół każdego przedmiotu byłby również miły,

86
00:07:00,650 --> 00:07:08,450
dlatego możemy po prostu dodać margines i być może dodać 15 jako margines wokół każdego przedmiotu, abyśmy mieli więcej

87
00:07:08,450 --> 00:07:10,070
odstępów we wszystkich kierunkach,

88
00:07:10,070 --> 00:07:12,500
a przy tym oczywiście nie jest

89
00:07:12,500 --> 00:07:18,080
tak źle możemy teraz również zmienić ogólny wygląd i na przykład nadać każdemu przedmiotowi

90
00:07:18,080 --> 00:07:24,230
wysokość, powiedzmy 150, i to od Ciebie zależy, jakie wartości tam wybierzesz, ale powiedziałbym, że

91
00:07:24,230 --> 00:07:25,610
to całkiem niezła

92
00:07:25,610 --> 00:07:26,400
siatka,

93
00:07:26,450 --> 00:07:31,310
na pewno nie wygrywa nagroda za styl, ale idziemy w dobrym kierunku.

94
00:07:32,920 --> 00:07:38,830
Teraz, zanim skończymy stylizację tego i na pewno mamy jeszcze trochę do zrobienia, upewnijmy się,

95
00:07:38,830 --> 00:07:44,950
że możemy dotknąć tych elementów, a następnie przejdziemy ponownie do ekranu szczegółów tego konkretnego elementu, zobaczmy

96
00:07:45,090 --> 00:07:50,770
zatem, jak możemy tak naprawdę ustaw tytuł w nagłówku, abyśmy mieli lepsze pojęcie o

97
00:07:50,770 --> 00:07:52,780
tym, gdzie aktualnie jesteśmy.