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
Native.
Jeśli wiesz już o tym wszystko, możesz oczywiście pominąć ten wykład.
W tym celu przygotowałem prostą aplikację fikcyjną i oczywiście okaże się, że
w załączeniu jest to normalna aplikacja React Native zbudowana z expo i aplikacji. tutaj plik js, co mam w
końcu to tylko widok z trzema widokami tam, gdzie każdy widok ma następnie tekst z tekstem
jeden, dwa, trzy, to po prostu tworzy
pola o różnych kolorach - czerwonym, niebieskim i zielonym, a teraz użyjemy Flexboksa, aby przenosić
te pola, abyś mógł poczuć, jak działa Flexbox, ponieważ jest to tak ważne.
Po pierwsze,
domyślnie każdy widok w React Native, nawet jeśli nie przypisujesz żadnych
specjalnych stylów, używa Flexboksa i różni się na przykład od sieci, jeśli masz
div, który byłby odpowiednikiem rodzaju widoku, to nie domyślnie nie używa Flexboksa.
W React Native robi to, każdy widok domyślnie porządkuje swoje dzieci za pomocą tej funkcji Flexbox,
Flexbox po prostu jest terminem, jest po prostu koncepcją z CSS, która polega na organizowaniu elementów potomnych
w jednowymiarowej przestrzeni, więc
tutaj na przykład w kolumnie. To także inne ustawienie domyślne,
nie tylko każdy widok domyślnie korzysta z Flexboksa, ale także domyślnie organizuje dzieci w kolumnie, więc od
góry do dołu. To także różnica w sieci
i nie chcę zbyt mocno podkreślać tych różnic, ponieważ oczywiście nie musisz być
programistą, aby tworzyć aplikacje React Native, ale myślę, że wiele osób zna tworzenie stron internetowych, zna
flexbox CSS i dlatego warto rozmawiać o różnicach. Tak więc w Internecie, gdy korzystasz z
Flexboksa, nie tylko
nie jest on domyślnie włączony, ponadto
jeśli go włączysz, domyślnie jest to uporządkowanie wszystkich elementów potomnych w rzędzie, a tutaj domyślnie
jest zorganizowanie ich w kolumna.
Możesz jednak zmienić to ustawienie domyślne, więc w tym przypadku w widoku, w którym znajdują się moje pola,
dodając tutaj kierunek wygięcia i ustawiając na przykład wiersz, teraz zobaczysz, że te trzy pola są zorganizowane w rzędzie
od lewej do prawej. Teraz oprócz wiersza i kolumny
masz również odwrotność wiersza i odwrotność kolumny, a to
po prostu robi to, co sugeruje nazwa.
Teraz nadal mamy wiersz, ale pierwszy element, czerwone pole faktycznie znajduje się po prawej stronie, a nie po lewej,
więc to też możesz
zrobić, pozwól mi jednak wrócić do rzędu. To pierwsza rzecz, którą możesz zrobić.
Inną ważną rzeczą w Flexbox jest to, jak rozmiar elementów potomnych jest wielkości, tutaj
nadałem każdemu elementowi potomnemu szerokość i wysokość 100.
Teraz, gdybyśmy usunęli tę szerokość i wysokość na każdym elemencie podrzędnym, zobaczysz, że teraz mamy tutaj bardzo mały
rząd, ponieważ każde pudełko jest teraz tak szerokie, jak wymaga tego dziecko, i tylko tak wysokie, jak jego
dziecko wymaga, aby tak było, więc każde pudełko,
które zawiera liczbę, jest tylko tak szerokie i wysokie, jak liczba, którą zawiera.
Teraz możesz to zmienić również za pomocą otaczającego pojemnika Flexbox. Załóżmy, że szerokość powiedzmy 300 pikseli
lub 80% szerokości rodzica, więc w tym przypadku,
ponieważ jest to element główny, szerokości urządzenia i nadajmy mu wysokość
powiedzmy 300.
Jeśli to zrobimy i teraz naprawdę ważne, robię to w widoku, który zawiera wszystkie te pudełka,
nie robię tego na samych pudełkach.
Jeśli więc przypiszemy tę szerokość i wysokość do otaczającego pola, zobaczysz coś
interesującego, wysokość zostanie przyjęta dla wszystkich
elementów, teraz wszystkie widoki w Flexbox przyjmują wysokość elementu nadrzędnego, szerokość nie ma tutaj wpływu.
Jest to również domyślne zachowanie, oczywiście, ponieważ niczego nie zmieniliśmy.
Domyślne zachowanie tutaj polega na tym, że elementy potomne w Flexbox, więc w
tym zewnętrznym widoku są zorganizowane w taki sposób, że wyrównują się wzdłuż osi poprzecznej przez rozciąganie.
Okej, to było wiele terminów, co to znaczy? Teraz podczas pracy
z Flexboksem mamy dwie ważne osie. Oś główna zależy od kierunku wygięcia, dla rzędu, który mamy tutaj,
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
od góry do dołu, a dla odwrotnej kolumny - od dołu do góry, więc to
jest główna oś, a
następnie masz również oś poprzeczną, a to po prostu przeciwnie głównej osi.
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,
co miałoby miejsce w przypadku odwrotnego rzędu, wówczas oś poprzeczna byłaby od dołu
do góry.
Okej, więc to jest koncepcja głównej osi i osi poprzecznej.
Teraz możesz uporządkować elementy potomne, więc w tym widoku, w którym mamy trzy pola jako elementy potomne,
możesz uporządkować te elementy potomne wzdłuż tej osi. Korzystasz z justowania zawartości do organizowania
elementów wzdłuż głównej osi i masz wyrównywane elementy, aby organizować elementy wokół osi poprzecznej.
Teraz zobaczysz wartości, które otrzymałeś za uzasadnienie treści, jeśli dodasz te
cytaty lub umieścisz tam kursor i naciśniesz klawisz kontrolny. Widzisz, że możesz wyśrodkować elementy, możesz
ustawić je na końcu lub na początku tego kontenera, lub możesz dodać trochę miejsca między
nimi, na
przykład jeśli użyjemy spacji między tutaj i użyjemy wyrównania środka przedmiotu, wtedy rzeczy się zmienią.
Teraz zobaczysz, że bierze szerokość otaczającego pojemnika, każde pudełko wciąż jest
dość małe, ale są podzielone lub są rozmieszczone na szerokości pojemnika nadrzędnego
i nie przyjmują już wysokości, ponieważ wzdłuż krzyża osi, wyrównujemy je z wyrównywanymi elementami
i tam ustawiam to na środku.
Domyślnie jest to rozciąganie, a jeśli ustawię go z powrotem na rozciąganie, nic dziwnego, że rozciągają się
na całej wysokości.
Teraz, jeśli chcesz się upewnić, że przyjmują dostępną szerokość, nie możesz tutaj ustawić
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.
Co więc możesz w związku z tym zrobić?
Cóż, jest to coś, co teraz konfigurujesz dla każdego elementu potomnego.
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
to na elemencie nadrzędnym, zwykle ustawiasz to
na elemencie podrzędnym.
Na przykład, jeśli ustawię to na środku, aby rodzic nie powiedział dziecku,
ile miejsca powinno zająć, wówczas możemy w pełni kontrolować przestrzeń, którą dziecko zajmuje, przechodząc do stylu
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
w tym przypadku znajdują się one
wewnątrz widoku i który może być sam widok, ale może to być również inny składnik,
na przykład tekst.
Więc teraz możesz dodać flex i możesz ustawić na przykład wartość
jeden, więc flex musi być liczbą. Jeśli ustawisz to na jeden,
zobaczysz, że teraz czerwony pojemnik, w którym ustawiłem flex na 1, przyjmuje całą dostępną szerokość, jaką może uzyskać tak bardzo,
że pozostawia wystarczająco dużo miejsca na niebieski i zielony pojemnik, aby mogły mogą wycisnąć ich
zawartość do otaczającego Flexbox.
Teraz nie widzimy granic otaczającego pojemnika, ale granice byłyby zasadniczo tam, gdzie zaczyna się
czerwony przedmiot, zielony przedmiot i tak dalej na osi poziomej.
Tak więc Flex One zapewnia, że czerwony przedmiot będzie tak duży, jak to tylko możliwe,
więc zajmie tyle miejsca, ile może dostać. Domyślnie widoki zajmują tylko tyle miejsca, ile wymagają ich elementy
potomne,
tak więc ten jeden znak jest wymagany, ale z elastycznym jednym, zmieniasz to i zajmują teraz tyle miejsca wzdłuż głównej
osi, więc na
całej szerokości tutaj, jak mogą otrzymać. W przypadku osi poprzecznej to znowu
szczególny przypadek, musisz to zrobić na obiekcie nadrzędnym. W przypadku osi głównej, a ponieważ
mamy tutaj wiersz, oś główna jest osią poziomą od lewej do prawej,
robisz to za pomocą właściwości flex na dziecku.
Teraz oczywiście możesz dodać flex również do innych elementów potomnych, takich jak ten drugi do niebieskiego pojemnika
z dwoma w nim,
możesz również dodać flex jeden tam.
Więc teraz mam Flex jeden na czerwonym pojemniku i Flex
na niebieskim pojemniku, a teraz dzieje się tak, że oba zajmują dostępne wolne miejsce, a między tymi dwoma
pudełkami przestrzeń jest równomiernie rozłożona i to właśnie ta liczba tutaj wskazuje.
Liczba ta jest liczbą
względną, wszystkie elementy w tym samym flexboksie, z właściwością flex rozdzielają dostępną przestrzeń, biorąc pod
uwagę przypisany tutaj numer, a te liczby są względem siebie.
Jeśli więc podam niebieski pojemnik flex tutaj, oznacza to, że z dostępnej przestrzeni, którą masz
w otaczającym pojemniku, po odjęciu przestrzeni każdy element musi tam wycisnąć swoją zawartość, niebieski
pojemnik
zajmie dwa razy więcej miejsca niż ten, ponieważ tutaj mamy flex jeden,
tutaj mamy
flex dwa, jeśli mielibyśmy flex tutaj trzy, to zajęłoby to trzy piąte dostępnego wolnego miejsca, ponieważ
mamy trzy plus
dwa, więc mamy 5 dostępnych segmentów a tutaj czerwony pojemnik zająłby 3 segmenty, niebieski
pojemnik zająłby 2 segmenty.
Jeśli mamy 1 i 2, to mamy trzy dostępne segmenty, a niebieski pojemnik zajmuje
dwa z nich, czerwony bierze jeden, więc zawsze sumujesz te liczby elastyczne, a następnie dystrybuujesz lub to
jest automatycznie robione, ale dostępna przestrzeń jest rozdzielana odpowiednio.
Teraz zobaczymy, że niebieski pojemnik jest dwa razy większy niż czerwony lub zajmuje dwa
razy więcej wolnego miejsca niż czerwony.
W ten sposób możesz pracować
z flexem, możesz uporządkować sposób pozycjonowania elementów z kierunkiem flexu, z uzasadnieniem zawartości i wyrównać elementy, a
także możesz sprawić, że twoje przedmioty będą się powiększać i zmniejszać za pomocą flexu.
To teraz krótkie wprowadzenie do Flexboksa w React Native, jak powiedziałem zainspirowany
Flexboksem dla CSS, więc jeśli wiesz, że wszystko, co tu wyjaśniłem, prawdopodobnie nie jest dla
ciebie nowe.
Będziemy pracować z Flexboksem podczas tego
kursu, więc rzeczy staną się również bardziej zrozumiałe i będziemy z nim
dużo pracować, a zobaczysz, jak możesz tworzyć piękne interfejsy użytkownika za pomocą Flexboksa. Flexbox jest narzędziem w React
Natywny do strukturyzowania treści na stronie, do porządkowania treści. Zazwyczaj będziesz pracować z wieloma widokami, które
również zagnieżdżają się w sobie, dzięki czemu możesz ustawiać elementy tak, jak chcesz,
oczywiście, a to
ważne, nie po prostu musisz mieć jeden widok w aplikacji, który korzysta z Flexboksa,
możesz mieć tam inny widok, który również korzysta z Flexboksa i tak
jak wspomniałem, każdy widok domyślnie używa Flexboksa, a następnie możesz zagnieździć te widoki w sobie, aby
ustawiasz wszystko tak, jak chcesz, a zobaczysz to już w
tym module i właściwie już to robię tutaj. W moich widokach tutaj, które są w widoku
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
tych polach, dzięki czemu 1, 2 i 3 są wyśrodkowane tam poziomo i pionowo i to działa, ponieważ
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ć
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
oś jest od góry do dołu, ponieważ domyślnym kierunkiem wygięcia jest kolumna, a oś poprzeczna jest
od lewej do prawej.
To tylko dodatkowa uwaga.