React Native: Flexbox

0.62.2+

0:00No dobra w poprzedniej lekcji wykorzystaliśmy sobie komponent TextInput

0:04ze wcześniejszych buttony jak raz to co zostało nam na koniec żeby to jakoś miało

0:08ręce i nogi to troszeczkę fajnie byłoby to ostylować i dodać troche więcej logiki

0:12wiec co zrobimy na końcu przez wszystkim w tej chwili ten button upgrade za wiele nie robi

0:16więc fajnie byłoby żeby coś jednak robił wiec co

0:20możemy zrobić to dodamy sobie dodamy sobie jakiś level

0:24damy opcje ustawienia tego levelu useState

0:29ale zaczynamy powiedzmy od levelu pierwszego zrobimy

0:34sobie jakiś powiedzmy nazwijmy to indykator tego

0:39zrobimy sobie LevelIndcator styled

0:50View i to niech będzie

0:54miało jakiś tam fajny kolor na przykład czerwony

0:59niech ma powiedzmy 20 pixeli szerokości

1:0420 pixeli wysokości border-radius

1:11niech ma 10 pixeli i

1:15do tego chciałbym żeby to nachodziło żeby

1:21to gdzieś tutaj było tak przy naszym zdjęciu profilowym żeby było wiadomo jaki mamy level

1:26czyli będzie top 0 right 0 zobaczmy

1:32jak to wygląda czyli wejdziemy sobie w naszego ProfileImage

1:37i dodamy coś takiego fajnie

1:41tylko no oczywiście to się absolut nam się odnosi w tym momencie do naszego kontenera

1:46a chciałbym żeby to się odnosiło do naszego tutaj powiedzmy

1:50subkontenera w związku z tym no musimy sobie opakować

1:54nasz profil w jakiś kontener

1:59nazwiemy to ProfileImageContainer albo właściwie Wrapper

2:03jakby bo powiedzmy że aż tak wiele rzeczy to on nie

2:08nie opakowuje a i to właściwie chyba

2:12nie musi mieć żadnych styli ważne żeby po prostu jakiś był

2:16zobaczmy super

2:20dokładnie o to nam chodziło no ale chciałbym żeby ten level się jakoś

2:24tam wyświetlał więc muślimy sobie jeszcze dodać const

2:29LevelIndicatorText to się równa

2:33wystylowany tekst i

2:38tutaj kolor niech to będzie white font-size

2:42nie wiem 12 pixeli i a ustawmy

2:46sobie text-align center

3:00i tu będzie nasz level fajnie jest level no

3:06tylko teraz ten level żeby nam się zwiększał byłoby super czyli ustawimy sobie

3:10setLevel level plus 1 upgrade upgrade upgrade super

3:17czyli mamy nasz upgrade'owanie naszego levelu no to może nie jest idealnie wyśrodkowane

3:21ale to już nas aż tak bardzo nie boli drugą rzeczą którą chciałbym tutaj dodać to żeby ten przycisk

3:26był tutaj z boku a nie tak jeden pod drugim czyli

3:30na pewno znowu będziemy potrzebowali sobie to opakować w jakiś kontener czyli nazwiemy

3:34to sobie const

3:38setDescription

3:43Wrapper to jest z wielkiej litery bo to jest komponent

3:47View dobra zróbmy

3:56na razie tyle okej

4:04i to na razie nam nic nie zmieni poza tym że no widać że się

4:08dopasowało to do szerokości tego tekstu do szerokości buttonu ale

4:13jakbym do dłuższego dziecka więc jak będę wpisać tekst to to się po prostu bedzie tak dopasować nie

4:17do końca o to nam chodziło więc musimy jakoś to pozamieniać

4:21i teraz generalnie jeśli chodzi o wszystkie kontenery pozycjonowanie

4:25elementów w kontenerach w React Native to służy do tego Flexbox

4:30ten Flexbox jest praktycznie identyczny z tym który jest

4:34dostępny w web-ie w przeglądarce

4:38więc sobie ustawmy na nim display flex zróbmy

4:43sobie flex-direction na row no

4:47i już powinno być trochę lepiej ale

4:51nie tu tutaj popatrzmy

4:55okej jakoś tak to w miarę wygląda natomiast dalej nie jest kolorowo z

4:59tego względu że z tego

5:04względu że są jeszcze złe rozmiary tu

5:10sobie to przynieśmy i tak DescriptionInput

5:14widzicie ma 100% no to niefajnie bo widzicie no

5:18wyjeżdża nam to wszystko i rozjeżdża cały widok więc usuńmy sobie to niech on się

5:22dopasowuje do wysokości szerokości przepraszam ale nasz DescriptionButton

5:26niech ma na sztywno na przykład 80 pixeli 80 no nie

5:30pixeli do końca okej i to jest spoko tylko

5:35widzimy że tutaj jeszcze ten nasz input ma jakiś margin usuwamy go

5:39fajnie i jeszcze

5:44tutaj jest margin którego byśmy nie chcieli okej zaczyna to wyglądać natomiast no problem jest taki

5:49że dalej ten rozmiar jest nie tak chcielibyśmy żeby ten tekst był wypełniał

5:54nam pełną przestrzeń i dlatego znowu sobie użyjemy Flexa jeśli tutaj podamy

5:58flex 1 to nam się pięknie to wszystko wypozycjonowało

6:02i możemy to już wstawić z

6:07tą różnicą że zmienię

6:11mu ten tekst na po prostu set no jakoś tak po co ten button ma

6:15być taki długi i wyjustujemy

6:19go sobie troszeczkę align content aj przepraszam justify-content center

6:27align-items center

6:31upgrade

6:35okej no bo to oczywiście nie to robiłem tylko

6:39chciałem to zrobić świetnie dokładnie o to mi chodziło piszemy piszemy pyk

6:43tutaj jeszcze można by dodać jakiś margin na górze żeby

6:47to tak na siebie nie nachodziło super mamy

6:52to co chcieliśmy jest okej sprawdźmy

6:57czy wszystko ładnie tej hula fantastycznie jest

7:01okej tylko jest jedna rzecz uważan że ten tutaj input on

7:06powinien być na samym dole tutaj przyklejony a nie gdzieś tak pod ten przycisk upgrade bo jakoś

7:14to dziwnie wygląda więc jak to zrobimy mamy

7:18sobie go opakowanego w Description natomiast to wszystko co wyżej też fajnie

7:22byłoby opakować jako jakiś na przykład Header Wrapper czy Content Wrapper

7:26tak to możemy nazwać no nazwijmy to po prostu Content ja już takiej uwagi w tym momencie

7:30nie przyjmuję do nazewnictwa natomiast generalnie jednak pamiętajmy o tym żeby starać się żeby

7:34faktycznie te nazwy tych komponentów miały logiczny

7:39sens względem właśnie naszego dokumentu naszego widoku to

7:44będzie oczywiście View opakujemy sobie

7:49tutaj wszystko w ten nasz Content

7:53zobaczmy co się stało nic się nie stało

7:57no i teraz tak naszemu naszemu

8:02DescriptionButtonowi Wrapperowi ustawmy na sztywno wysokość

8:06na przykład niech to będzie te 50 pixeli stąd wywalmy

8:11okej ustawmy

8:17w naszym kontenerze głównym display flex

8:21a naszemu Wrapperowi Contentowi ustawmy

8:26flex 1 i to powoduje że no mniej więcej

8:31to chciałem to znaczy że to się przykleiło do dołu nasz Contenent gdzieś

8:35jest tutaj przy czym w samym Contencie chciałbym jeszcze zapożyczyć

8:39sobie to które tutaj już nie jest potrzebne i zobaczmy jak to teraz

8:43wygląda dokładnie dokładnie o coś takiego o co walczyłem

8:47świetnie zobaczmy jak to działa coś tam coś tam coś tam coś tam coś tam

8:51set jest fajnie mam

8:56tylko jedną uwagę tego całego kodu zauważcie że zaczyna nam się robić tutaj niezły

9:00niezły bajzel bo mamy całkiem niemały niemałą

9:05strukturę tego profilu i tych styli jest całkiem sporo i generalnie zasada

9:09jest taka o której chciałbym żebyście pamietali żeby te style style powinny być wyeksportowane do innego

9:13pliku czyli powinniśmy mieć dokładnie dokument

9:17plik ProfileScreen styled js w którym będą te wszystkie style w którym

9:21i w tym dokumencie będzie się po prostu importować dzieki temu będziecie mieć ładny podział na wasz

9:25komponent w którym jest po prostu struktura i te style ja

9:30teraz nie będę tego robić z tego względu że bardzo tutaj rzeczy jeszcze będę bardzo wiele rzeczy będę zmieniać

9:34i dopasowywać i testować wiec już zostawmy tak jak jest natomiast no chciałbym żebyście

9:38to zapamiętali i już praktycznie na tym moglibyśmy zakończyć bo

9:42to wygląda fajnie a zobaczmy jak to wygląda na iOS-ie no właśnie zobaczcie że na iOS-ie

9:48nasza klawiatura fajnie że wyjeżdża tak ładnie

9:52natomiast przykrywa nam nasz tekst i okej to działa ustawia

9:57nam się ten opis natomiast no nie widzimy co wpisujemy na androidzie jest okej a

10:02to wynika trochę z tego to jest jedna z różnic właśnie między platformami czyli

10:06w jaki sposób klawiatura wpływa nam na nasz content w androidzie domyślnie cały

10:10nasz content jest podnoszony do elementu w którym coś wpisujemy czyli jeśli tutaj mamy

10:14właśnie text input i w nim jakby urzędujemy to klawiatura zostanie

10:19do niego dociągnięta cały content zostanie podpięty w górę czyli domyślnie tak jakbyśmy chcieli w iOS-ie

10:23natomiast mamy tutaj pełną dowolność możemy to obsłużyć tak jak chcemy ale domyślnie

10:27nie jest to w żaden sposób obsłużone to co możemy z tym zrobić to

10:32dodać dodatkowy Wrapper na to wszystko

10:36który się nazywa KeyboardAvoidingView

10:42i ten KeyboardAvoidingView

10:46ma pewien parametr behavior

10:53a oczywiście musimy zaimportować sobie ten nasz komponent bo inaczej go nie widzimy on

10:57jest w React Native i ma nasz parametr

11:01behavior który przyjmuje kilka opcji jeśli ustawimy sobie opcję padding

11:05to spowoduje że w momencie jak wyjeżdża klawiatura do tego naszego widoku

11:09dostanie zostanie dołączony padding w locie zobaczmy jak to wygląda super tak

11:14wygląda to fajnie widzimy tutaj tylko jeden problem że nasz

11:18tekst dziwnie się zachowuje to wynika z tego że jeśli ten tekst nieopakowany

11:22w żaden własnie te dwa teksty są nie opakowane w żaden kontener

11:27to tak sie po prostu dzieje więc najłatwiej po prostu zrobić tak i

11:32w tej chwili wszystko będzie ładnie chodziło zauważyłem przy okazji jeszcze jedną rzecz to

11:37znaczy że jeśli kliknę tutaj set to nam się ustawi pusty description a bym

11:41nie chciał żebyś się dało ustawić pustego description'a więc zrobimy sobie na szybko taki mały tutaj check

11:46czyli jeśli currentText.length jest

11:50mniejszy od 3 to return i dziękujemy

11:54państwu zobaczmy czy to działa okej dobra

12:00okej czyli działa super i chyba na tym moglibyśmy zakończyć zobaczmy

12:04natomiast jak to wygląda w androidzie no właśnie udało

12:09nam się rozwiązać problem na iOS-ie ale udało nam się również zepsuć to na androidzie no

12:14i teraz jak to rozwiązać no najłatwiej byłoby

12:19po prostu usunąć nasz KeyboardAvoidingView tak

12:23ewentualnie możemy spróbować stawić inny parametr spróbujmy ustawić parametr height

12:28co to robi no prawie prawie prawie myślę że

12:32gdybyśmy trochę podziałali z jakimiś marginesami to może nawet udałoby nam się to osiągnąć spróbujmy

12:37trzeci parametr position no

12:43i tutaj jeśli zapisałem plik nie zapisałem jest refreshowanie no

12:48tutaj jest jeszcze gorzej czyli najbliżej jesteśmy tutaj tego parametru height ale

12:55tak naprawdę to najchętniej w ogóle pozbyłbym się tego

12:59na androidzie natomiast na iOS-ie bym to zostawił i teraz jak to

13:03zrobić no i właśnie dochodzimy tutaj do momentu w którym musimy coś

13:07inaczej napisać na jednej platformie a inaczej na drugiej i powiemy sobie o tym w następnym rozdziale