1
00:00:02,230 --> 00:00:08,100
W tym wykładzie chcę zagłębić się nieco głębiej w flexbox, szczególnie jeśli chodzi o to, jak go używać w aplikacjach React

2
00:00:08,110 --> 00:00:08,690
Native.

3
00:00:08,710 --> 00:00:12,310
Jeśli wiesz już o tym wszystko, możesz oczywiście pominąć ten wykład.

4
00:00:12,340 --> 00:00:14,920
W tym celu przygotowałem prostą aplikację fikcyjną i oczywiście okaże się, że

5
00:00:14,920 --> 00:00:20,420
w załączeniu jest to normalna aplikacja React Native zbudowana z expo i aplikacji. tutaj plik js, co mam w

6
00:00:20,460 --> 00:00:26,890
końcu to tylko widok z trzema widokami tam, gdzie każdy widok ma następnie tekst z tekstem

7
00:00:26,890 --> 00:00:29,990
jeden, dwa, trzy, to po prostu tworzy

8
00:00:30,010 --> 00:00:36,310
pola o różnych kolorach - czerwonym, niebieskim i zielonym, a teraz użyjemy Flexboksa, aby przenosić

9
00:00:36,310 --> 00:00:41,950
te pola, abyś mógł poczuć, jak działa Flexbox, ponieważ jest to tak ważne.

10
00:00:42,240 --> 00:00:43,240
Po pierwsze,

11
00:00:43,660 --> 00:00:49,120
domyślnie każdy widok w React Native, nawet jeśli nie przypisujesz żadnych

12
00:00:49,120 --> 00:00:55,410
specjalnych stylów, używa Flexboksa i różni się na przykład od sieci, jeśli masz

13
00:00:55,420 --> 00:01:01,370
div, który byłby odpowiednikiem rodzaju widoku, to nie domyślnie nie używa Flexboksa.

14
00:01:01,450 --> 00:01:08,260
W React Native robi to, każdy widok domyślnie porządkuje swoje dzieci za pomocą tej funkcji Flexbox,

15
00:01:08,350 --> 00:01:15,490
Flexbox po prostu jest terminem, jest po prostu koncepcją z CSS, która polega na organizowaniu elementów potomnych

16
00:01:15,520 --> 00:01:17,440
w jednowymiarowej przestrzeni, więc

17
00:01:17,440 --> 00:01:21,990
tutaj na przykład w kolumnie. To także inne ustawienie domyślne,

18
00:01:21,990 --> 00:01:29,340
nie tylko każdy widok domyślnie korzysta z Flexboksa, ale także domyślnie organizuje dzieci w kolumnie, więc od

19
00:01:29,340 --> 00:01:33,020
góry do dołu. To także różnica w sieci

20
00:01:33,020 --> 00:01:37,350
i nie chcę zbyt mocno podkreślać tych różnic, ponieważ oczywiście nie musisz być

21
00:01:37,350 --> 00:01:42,400
programistą, aby tworzyć aplikacje React Native, ale myślę, że wiele osób zna tworzenie stron internetowych, zna

22
00:01:42,400 --> 00:01:47,400
flexbox CSS i dlatego warto rozmawiać o różnicach. Tak więc w Internecie, gdy korzystasz z

23
00:01:47,400 --> 00:01:48,840
Flexboksa, nie tylko

24
00:01:48,840 --> 00:01:51,220
nie jest on domyślnie włączony, ponadto

25
00:01:51,240 --> 00:01:56,820
jeśli go włączysz, domyślnie jest to uporządkowanie wszystkich elementów potomnych w rzędzie, a tutaj domyślnie

26
00:01:56,820 --> 00:01:59,010
jest zorganizowanie ich w kolumna.

27
00:01:59,010 --> 00:02:05,910
Możesz jednak zmienić to ustawienie domyślne, więc w tym przypadku w widoku, w którym znajdują się moje pola,

28
00:02:05,910 --> 00:02:12,960
dodając tutaj kierunek wygięcia i ustawiając na przykład wiersz, teraz zobaczysz, że te trzy pola są zorganizowane w rzędzie

29
00:02:12,960 --> 00:02:16,560
od lewej do prawej. Teraz oprócz wiersza i kolumny

30
00:02:16,560 --> 00:02:19,250
masz również odwrotność wiersza i odwrotność kolumny, a to

31
00:02:19,260 --> 00:02:21,720
po prostu robi to, co sugeruje nazwa.

32
00:02:21,720 --> 00:02:29,010
Teraz nadal mamy wiersz, ale pierwszy element, czerwone pole faktycznie znajduje się po prawej stronie, a nie po lewej,

33
00:02:29,010 --> 00:02:30,820
więc to też możesz

34
00:02:30,840 --> 00:02:36,210
zrobić, pozwól mi jednak wrócić do rzędu. To pierwsza rzecz, którą możesz zrobić.

35
00:02:36,210 --> 00:02:42,750
Inną ważną rzeczą w Flexbox jest to, jak rozmiar elementów potomnych jest wielkości, tutaj

36
00:02:42,810 --> 00:02:47,040
nadałem każdemu elementowi potomnemu szerokość i wysokość 100.

37
00:02:47,070 --> 00:02:54,660
Teraz, gdybyśmy usunęli tę szerokość i wysokość na każdym elemencie podrzędnym, zobaczysz, że teraz mamy tutaj bardzo mały

38
00:02:54,660 --> 00:03:01,890
rząd, ponieważ każde pudełko jest teraz tak szerokie, jak wymaga tego dziecko, i tylko tak wysokie, jak jego

39
00:03:01,890 --> 00:03:05,700
dziecko wymaga, aby tak było, więc każde pudełko,

40
00:03:05,700 --> 00:03:11,180
które zawiera liczbę, jest tylko tak szerokie i wysokie, jak liczba, którą zawiera.

41
00:03:11,340 --> 00:03:18,180
Teraz możesz to zmienić również za pomocą otaczającego pojemnika Flexbox. Załóżmy, że szerokość powiedzmy 300 pikseli

42
00:03:18,330 --> 00:03:22,740
lub 80% szerokości rodzica, więc w tym przypadku,

43
00:03:22,740 --> 00:03:28,950
ponieważ jest to element główny, szerokości urządzenia i nadajmy mu wysokość

44
00:03:29,020 --> 00:03:30,230
powiedzmy 300.

45
00:03:30,480 --> 00:03:36,720
Jeśli to zrobimy i teraz naprawdę ważne, robię to w widoku, który zawiera wszystkie te pudełka,

46
00:03:36,720 --> 00:03:39,380
nie robię tego na samych pudełkach.

47
00:03:39,480 --> 00:03:45,050
Jeśli więc przypiszemy tę szerokość i wysokość do otaczającego pola, zobaczysz coś

48
00:03:45,150 --> 00:03:48,250
interesującego, wysokość zostanie przyjęta dla wszystkich

49
00:03:48,270 --> 00:03:54,810
elementów, teraz wszystkie widoki w Flexbox przyjmują wysokość elementu nadrzędnego, szerokość nie ma tutaj wpływu.

50
00:03:54,870 --> 00:03:59,510
Jest to również domyślne zachowanie, oczywiście, ponieważ niczego nie zmieniliśmy.

51
00:03:59,760 --> 00:04:06,840
Domyślne zachowanie tutaj polega na tym, że elementy potomne w Flexbox, więc w

52
00:04:06,850 --> 00:04:15,360
tym zewnętrznym widoku są zorganizowane w taki sposób, że wyrównują się wzdłuż osi poprzecznej przez rozciąganie.

53
00:04:15,490 --> 00:04:20,510
Okej, to było wiele terminów, co to znaczy? Teraz podczas pracy

54
00:04:20,530 --> 00:04:29,290
z Flexboksem mamy dwie ważne osie. Oś główna zależy od kierunku wygięcia, dla rzędu, który mamy tutaj,

55
00:04:29,350 --> 00:04:37,690
rząd kierunku wygięcia, oś główna jest od lewej do prawej. W przypadku odwrotnego wiersza byłby od prawej do lewej, w przypadku kolumny byłby

56
00:04:37,690 --> 00:04:42,570
od góry do dołu, a dla odwrotnej kolumny - od dołu do góry, więc to

57
00:04:42,580 --> 00:04:44,270
jest główna oś, a

58
00:04:44,620 --> 00:04:48,630
następnie masz również oś poprzeczną, a to po prostu przeciwnie głównej osi.

59
00:04:48,640 --> 00:04:56,110
Tak więc dla rzędu, w którym główna oś jest od lewej do prawej, oś poprzeczna byłaby od góry do dołu. Jeśli główna oś znajduje się od prawej do lewej,

60
00:04:56,110 --> 00:05:01,900
co miałoby miejsce w przypadku odwrotnego rzędu, wówczas oś poprzeczna byłaby od dołu

61
00:05:01,900 --> 00:05:03,100
do góry.

62
00:05:03,340 --> 00:05:06,940
Okej, więc to jest koncepcja głównej osi i osi poprzecznej.

63
00:05:06,940 --> 00:05:13,060
Teraz możesz uporządkować elementy potomne, więc w tym widoku, w którym mamy trzy pola jako elementy potomne,

64
00:05:13,360 --> 00:05:20,170
możesz uporządkować te elementy potomne wzdłuż tej osi. Korzystasz z justowania zawartości do organizowania

65
00:05:20,200 --> 00:05:27,760
elementów wzdłuż głównej osi i masz wyrównywane elementy, aby organizować elementy wokół osi poprzecznej.

66
00:05:27,760 --> 00:05:31,040
Teraz zobaczysz wartości, które otrzymałeś za uzasadnienie treści, jeśli dodasz te

67
00:05:31,090 --> 00:05:37,230
cytaty lub umieścisz tam kursor i naciśniesz klawisz kontrolny. Widzisz, że możesz wyśrodkować elementy, możesz

68
00:05:37,230 --> 00:05:44,040
ustawić je na końcu lub na początku tego kontenera, lub możesz dodać trochę miejsca między

69
00:05:44,040 --> 00:05:45,270
nimi, na

70
00:05:45,300 --> 00:05:52,500
przykład jeśli użyjemy spacji między tutaj i użyjemy wyrównania środka przedmiotu, wtedy rzeczy się zmienią.

71
00:05:52,500 --> 00:05:57,490
Teraz zobaczysz, że bierze szerokość otaczającego pojemnika, każde pudełko wciąż jest

72
00:05:57,540 --> 00:06:03,360
dość małe, ale są podzielone lub są rozmieszczone na szerokości pojemnika nadrzędnego

73
00:06:03,360 --> 00:06:09,570
i nie przyjmują już wysokości, ponieważ wzdłuż krzyża osi, wyrównujemy je z wyrównywanymi elementami

74
00:06:09,570 --> 00:06:12,960
i tam ustawiam to na środku.

75
00:06:13,020 --> 00:06:19,620
Domyślnie jest to rozciąganie, a jeśli ustawię go z powrotem na rozciąganie, nic dziwnego, że rozciągają się

76
00:06:19,620 --> 00:06:20,960
na całej wysokości.

77
00:06:20,970 --> 00:06:26,490
Teraz, jeśli chcesz się upewnić, że przyjmują dostępną szerokość, nie możesz tutaj ustawić

78
00:06:26,490 --> 00:06:32,820
rozciągania dla uzasadnienia treści, która jest twoim pojazdem pozycjonującym główną oś, więc nie możesz ustawić rozciągania tutaj.

79
00:06:32,980 --> 00:06:35,880
Co więc możesz w związku z tym zrobić?

80
00:06:35,890 --> 00:06:40,780
Cóż, jest to coś, co teraz konfigurujesz dla każdego elementu potomnego.

81
00:06:40,810 --> 00:06:50,290
Możesz powiedzieć dziecku, ile miejsca powinno zdjąć z potencjalnie dostępnego miejsca. Rozciągnięcie tutaj jest rodzajem specjalnego przypadku, w którym ustawiasz

82
00:06:50,290 --> 00:06:54,220
to na elemencie nadrzędnym, zwykle ustawiasz to

83
00:06:54,220 --> 00:06:56,640
na elemencie podrzędnym.

84
00:06:56,680 --> 00:07:02,200
Na przykład, jeśli ustawię to na środku, aby rodzic nie powiedział dziecku,

85
00:07:02,200 --> 00:07:08,950
ile miejsca powinno zająć, wówczas możemy w pełni kontrolować przestrzeń, którą dziecko zajmuje, przechodząc do stylu

86
00:07:08,950 --> 00:07:17,410
dziecięcego i tam możesz dodać flex , właściwość flex. Właściwość flex jest stosowana do elementów znajdujących się w flexbox, więc

87
00:07:17,410 --> 00:07:19,730
w tym przypadku znajdują się one

88
00:07:19,810 --> 00:07:25,660
wewnątrz widoku i który może być sam widok, ale może to być również inny składnik,

89
00:07:25,660 --> 00:07:27,150
na przykład tekst.

90
00:07:27,160 --> 00:07:31,320
Więc teraz możesz dodać flex i możesz ustawić na przykład wartość

91
00:07:31,330 --> 00:07:35,940
jeden, więc flex musi być liczbą. Jeśli ustawisz to na jeden,

92
00:07:35,950 --> 00:07:44,050
zobaczysz, że teraz czerwony pojemnik, w którym ustawiłem flex na 1, przyjmuje całą dostępną szerokość, jaką może uzyskać tak bardzo,

93
00:07:44,110 --> 00:07:50,440
że pozostawia wystarczająco dużo miejsca na niebieski i zielony pojemnik, aby mogły mogą wycisnąć ich

94
00:07:50,620 --> 00:07:52,470
zawartość do otaczającego Flexbox.

95
00:07:52,480 --> 00:07:58,360
Teraz nie widzimy granic otaczającego pojemnika, ale granice byłyby zasadniczo tam, gdzie zaczyna się

96
00:07:58,600 --> 00:08:03,060
czerwony przedmiot, zielony przedmiot i tak dalej na osi poziomej.

97
00:08:04,720 --> 00:08:11,020
Tak więc Flex One zapewnia, że czerwony przedmiot będzie tak duży, jak to tylko możliwe,

98
00:08:11,170 --> 00:08:17,140
więc zajmie tyle miejsca, ile może dostać. Domyślnie widoki zajmują tylko tyle miejsca, ile wymagają ich elementy

99
00:08:17,140 --> 00:08:17,690
potomne,

100
00:08:17,710 --> 00:08:24,040
tak więc ten jeden znak jest wymagany, ale z elastycznym jednym, zmieniasz to i zajmują teraz tyle miejsca wzdłuż głównej

101
00:08:24,040 --> 00:08:25,140
osi, więc na

102
00:08:25,150 --> 00:08:29,140
całej szerokości tutaj, jak mogą otrzymać. W przypadku osi poprzecznej to znowu

103
00:08:29,140 --> 00:08:34,310
szczególny przypadek, musisz to zrobić na obiekcie nadrzędnym. W przypadku osi głównej, a ponieważ

104
00:08:34,360 --> 00:08:38,790
mamy tutaj wiersz, oś główna jest osią poziomą od lewej do prawej,

105
00:08:38,800 --> 00:08:41,520
robisz to za pomocą właściwości flex na dziecku.

106
00:08:42,700 --> 00:08:48,550
Teraz oczywiście możesz dodać flex również do innych elementów potomnych, takich jak ten drugi do niebieskiego pojemnika

107
00:08:48,550 --> 00:08:50,260
z dwoma w nim,

108
00:08:50,260 --> 00:08:52,420
możesz również dodać flex jeden tam.

109
00:08:52,420 --> 00:08:56,690
Więc teraz mam Flex jeden na czerwonym pojemniku i Flex

110
00:08:56,710 --> 00:09:03,790
na niebieskim pojemniku, a teraz dzieje się tak, że oba zajmują dostępne wolne miejsce, a między tymi dwoma

111
00:09:03,790 --> 00:09:08,870
pudełkami przestrzeń jest równomiernie rozłożona i to właśnie ta liczba tutaj wskazuje.

112
00:09:08,930 --> 00:09:11,210
Liczba ta jest liczbą

113
00:09:11,210 --> 00:09:18,350
względną, wszystkie elementy w tym samym flexboksie, z właściwością flex rozdzielają dostępną przestrzeń, biorąc pod

114
00:09:18,410 --> 00:09:23,130
uwagę przypisany tutaj numer, a te liczby są względem siebie.

115
00:09:23,140 --> 00:09:29,800
Jeśli więc podam niebieski pojemnik flex tutaj, oznacza to, że z dostępnej przestrzeni, którą masz

116
00:09:29,950 --> 00:09:36,100
w otaczającym pojemniku, po odjęciu przestrzeni każdy element musi tam wycisnąć swoją zawartość, niebieski

117
00:09:36,100 --> 00:09:36,840
pojemnik

118
00:09:36,970 --> 00:09:42,480
zajmie dwa razy więcej miejsca niż ten, ponieważ tutaj mamy flex jeden,

119
00:09:42,490 --> 00:09:43,760
tutaj mamy

120
00:09:43,810 --> 00:09:50,560
flex dwa, jeśli mielibyśmy flex tutaj trzy, to zajęłoby to trzy piąte dostępnego wolnego miejsca, ponieważ

121
00:09:50,560 --> 00:09:52,150
mamy trzy plus

122
00:09:52,210 --> 00:09:58,300
dwa, więc mamy 5 dostępnych segmentów a tutaj czerwony pojemnik zająłby 3 segmenty, niebieski

123
00:09:58,300 --> 00:09:59,950
pojemnik zająłby 2 segmenty.

124
00:09:59,950 --> 00:10:05,950
Jeśli mamy 1 i 2, to mamy trzy dostępne segmenty, a niebieski pojemnik zajmuje

125
00:10:06,070 --> 00:10:13,510
dwa z nich, czerwony bierze jeden, więc zawsze sumujesz te liczby elastyczne, a następnie dystrybuujesz lub to

126
00:10:13,510 --> 00:10:17,680
jest automatycznie robione, ale dostępna przestrzeń jest rozdzielana odpowiednio.

127
00:10:17,680 --> 00:10:22,660
Teraz zobaczymy, że niebieski pojemnik jest dwa razy większy niż czerwony lub zajmuje dwa

128
00:10:22,660 --> 00:10:25,090
razy więcej wolnego miejsca niż czerwony.

129
00:10:25,090 --> 00:10:27,090
W ten sposób możesz pracować

130
00:10:27,130 --> 00:10:33,760
z flexem, możesz uporządkować sposób pozycjonowania elementów z kierunkiem flexu, z uzasadnieniem zawartości i wyrównać elementy, a

131
00:10:33,790 --> 00:10:39,370
także możesz sprawić, że twoje przedmioty będą się powiększać i zmniejszać za pomocą flexu.

132
00:10:39,430 --> 00:10:44,490
To teraz krótkie wprowadzenie do Flexboksa w React Native, jak powiedziałem zainspirowany

133
00:10:44,560 --> 00:10:51,070
Flexboksem dla CSS, więc jeśli wiesz, że wszystko, co tu wyjaśniłem, prawdopodobnie nie jest dla

134
00:10:51,070 --> 00:10:52,280
ciebie nowe.

135
00:10:52,450 --> 00:10:54,610
Będziemy pracować z Flexboksem podczas tego

136
00:10:54,610 --> 00:10:58,900
kursu, więc rzeczy staną się również bardziej zrozumiałe i będziemy z nim

137
00:10:58,930 --> 00:11:05,170
dużo pracować, a zobaczysz, jak możesz tworzyć piękne interfejsy użytkownika za pomocą Flexboksa. Flexbox jest narzędziem w React

138
00:11:05,170 --> 00:11:10,570
Natywny do strukturyzowania treści na stronie, do porządkowania treści. Zazwyczaj będziesz pracować z wieloma widokami, które

139
00:11:10,570 --> 00:11:15,190
również zagnieżdżają się w sobie, dzięki czemu możesz ustawiać elementy tak, jak chcesz,

140
00:11:15,190 --> 00:11:16,720
oczywiście, a to

141
00:11:16,840 --> 00:11:21,680
ważne, nie po prostu musisz mieć jeden widok w aplikacji, który korzysta z Flexboksa,

142
00:11:21,730 --> 00:11:26,050
możesz mieć tam inny widok, który również korzysta z Flexboksa i tak

143
00:11:26,050 --> 00:11:31,570
jak wspomniałem, każdy widok domyślnie używa Flexboksa, a następnie możesz zagnieździć te widoki w sobie, aby

144
00:11:31,600 --> 00:11:35,070
ustawiasz wszystko tak, jak chcesz, a zobaczysz to już w

145
00:11:35,140 --> 00:11:41,200
tym module i właściwie już to robię tutaj. W moich widokach tutaj, które są w widoku

146
00:11:41,200 --> 00:11:47,710
otaczającym, więc tutaj moje pola, tam również używam justowania zawartości i wyrównywania elementów, aby wyśrodkować moje liczby w

147
00:11:47,710 --> 00:11:54,070
tych polach, dzięki czemu 1, 2 i 3 są wyśrodkowane tam poziomo i pionowo i to działa, ponieważ

148
00:11:54,070 --> 00:12:00,700
mamy Flexbox włączony domyślnie i nie możemy go wyłączyć przy okazji, dlatego używam tych dwóch właściwości tutaj, aby wyrównać

149
00:12:00,700 --> 00:12:08,320
moją zawartość tego widoku wzdłuż głównej i poprzecznej osi i tutaj, ponieważ nie ustawiłem żadnego specjalnego flexa W tym widoku główna

150
00:12:08,320 --> 00:12:14,170
oś jest od góry do dołu, ponieważ domyślnym kierunkiem wygięcia jest kolumna, a oś poprzeczna jest

151
00:12:14,530 --> 00:12:16,420
od lewej do prawej.

152
00:12:16,420 --> 00:12:17,440
To tylko dodatkowa uwaga.