React Native: Buttony

0.62.2+

0:00Czyli pokazaliśmy sobie jak w ciekawy sposób ostylować nasz

0:04widok wykorzystaliśmy podstawowe komponenty skorzystaliśmy sobie ze Styled Components no i

0:08teraz chcielibyśmy dodać jakąś akcję użytkownika zobaczyć w jaki sposób użytkownik

0:12może może coś z tą aplikacją robić więc podstawowym

0:16takim elementem są buttony czyli jakiś tam input zróbmy

0:21sobie takiego buttona taki button wymaga od nas

0:25podania tytułu na przykład nazwijmy to upgrade

0:29załóżmy że będzie można nasz profil sobie upgrade'ować

0:35fajnie ale zauważcie jedną rzecz którą będzie widać teraz zbudować

0:42nam się musi android okej zobaczcie

0:47na to co się stało inaczej wygląda ten button na androidzie inaczej

0:51wygląda na iOS-ie dlaczego dlatego że skorzystaliśmy z gotowego komponentu button który

0:56generuje nam natywny button iOS-owy i natywny button androidowy

1:01na iOS-ie taki defaultowy button nie ma tła i po

1:05kliknięciu zmienia mu się opacity natomiast w przypadku androida mamy jakiś background

1:10z lekkimi radiusami na rogach i zauważcie że mamy taki efekt

1:15materialowy czyli po kliknięciu nam się rozchodzi ten to tło no i

1:19fajnie jakby w pewnych sytuacjach chcielibyśmy żeby to faktycznie tak wygądało natomiast

1:24no jednak gdzieś tam zależy

1:28nam na spójności nasz grafik powiedział no że nie może tak być że pre graficzny

1:32pokazuje nam tu jeden konkretny button no i chcielibyśmy go zrobić w związku z tym w praktyce

1:37z takiego elementu się nie korzysta bo bo rzadko

1:43się zdarza żeby można sobie pozwolić na aż taką dowolność żeby tu był button taki a tu był button taki natomiast

1:47załóżmy na poczet początku tej lekcji że to jest okej no

1:51i chcielibyśmy żeby po upgrade coś się działo i na przykład żeby nam się po prostu

1:56coś logowało więc do tego służy nam props onPress który

2:01jest wywoływany w momencie kliknięcia no i teraz zróbmy sobie

2:05naszą funkcję która to obsłuży na przykład onUpgradePress

2:10i dodajmy tutaj naszego loga Upgrade

2:20level okej

2:25i wrzućmy to tutaj zobaczmy

2:29czy to działa jak widać tutaj się nam loguje nasze

2:33kliknięcie zostało przyjęte oczywiście to nie ma jakby wiekszego zwiazku

2:37z React Nativem tylko bardziej Reactem możemy również to wywołać w ten sposób czyli bez przekazywania referencji

2:41tylko że akurat w tym konkretnym wypadku nic nam to nie zmienia

2:45natomiast też tak to działa ja jestem zwolennikiem właśnie przekazywania w ten sposób referencji to jest po prostu czystsze

2:49ale czasem jak musimy dodatkowy parametr przekazać to musielibyśmy zrobić to w formie

2:54takiej funkcji strzałkowej okej czyli jest spoko nam to działa zaraz

2:58sobie dodamy jakąś obsługę faktycznie zwiększania tego levelu cokolwiek

3:02to tutaj w tej chwili mam na myśli no ale jednak

3:06chciałbym żeby ten button no wyglądał w ten sposób no i oczywiście można

3:10by go jakoś tam stylować natomiast w praktyce znowu to jest trochę jak z tym expo jest

3:15możliwe na starcie jest to fajne bo robimy sobie taki jeden komponent i nam

3:19działa ale w praktyce gdzieś raczej się z tego nie korzysta to z czego się korzysta to

3:25są wszystkiego rodzaju Touchable zauważmy że jak wpiszemy sobie Touchable to dostajemy

3:29listę wielu możliwości wielu

3:33komponentów które które są właśnie typu Touchable i takim postawowym jest TouchableHighlight

3:38i on od buttona różni się jedną zasadniczą rzeczą właściwie wszystkie Touchable

3:42różnią się jedną zasadniczą rzeczą one same w sobie nie mają kontentu to znaczy

3:46my dopiero musimy jakby wewnątrz nich jak go tak wyświetlę to nic nam

3:50się nie pojawi a nawet zresztą wyświetla mi się błąd że nasz Touchable

3:54wymaga pojedyńczego dziecka czyli jakiegoś

3:59komponentu który on owrapuje i pozwoli właśnie pozwoli

4:03na interakcje z nim wiec dodajmy sobie jakiś tutaj tekst

4:09nazwijmy to sobie właśnie upgrade okej

4:13i mamy naszego upgrade'a z tą różnicą że no nic tutaj nam się nie dzieje w sensie

4:17niby jest TouchableHighlight ale nic się nie dzieje więc

4:21może ustawmy sobie ja na razie robię to inline'owo żeby pokazać wam na szybko oczywiście docelowo

4:25przyniesiemy to sobie do naszych Styled Component może ustawię mu jakiś backgroundColor

4:30ojejku nie to backgroundColor na

4:34przykład na jakiś jaskrawy fajny typu red fajnie

4:40ale dalej no nic się nie dzieje okej

4:45więc może brakuje nam czegoś jeszcze popatrzmy sobie na parametry mamy coś takiego jak

4:49underlayColor nie wiem

4:53czy nam się załaduje podpowiedź natomiast to jest generalnie kolor który będzie wyświetlany w

4:57momencie kliknięcia więc może tutaj ustawmy na blue i

5:03teraz to powinno działać no niestety nie działa nie działa tego względu że ten

5:07komponent nasz TouchableHighlight powiedzmy że jest w miarę sprytny i

5:11on nie chce działać jako Touchable dopóki tak naprawdę takim Touchable nie będzie a będzie dopiero wtedy kiedy

5:15faktycznie poprosimy go o to żeby nam mówił kiedy został klkniety

5:19czyli musimy dodać metodę onPress w momencie kiedy ja dodamy zauważcie

5:24że nasz TouchableHighlight działa i ustawia nam tło tak jak tak

5:29jak byśmy chcieli i spoko moglibyśmy to zostawić tak ostylować ale

5:34ja osobiście częściej korzystam z innego Touchable'a i

5:38raczej jego używam w większości przypadków bo jakoś tak mi się wydaje ten

5:42feedback kliknięcia taki bardziej naturalny TouchableOpacity jak sama nazwa wskazuje

5:46on nam po prostu zmienia opacity

5:50naszych dzieci które naszego dziecka które posiada wewnątrz czyli jeśli

5:54tu zrobimy upgrade zapisz no proszę

5:58bardzo zmienia nam ten upgrade to trochę swoją drogą przypomina trochę defaultowy

6:03iOS-owy button i przy tym zostaniemy przy tym zostaniemy

6:07to wygląda fajnie zobaczcie że tutaj TouchableOpacity nie wymaga od nas żebyśmy podawali metodę onPress

6:12on po prostu już w tej chwili działa jeśli dodamy tutaj jednak ten onPress żeby zobaczyć czy to

6:16na pewno działa onUpgrad tak się zdaje nazywała nasza metoda

6:21tak jest wyczyśćmy sobie

6:25logi no i mamy nasz Upgrade level który zostaje wywoływany

6:29spoko zaczniemy sobie jednak

6:33trochę ostylujmy nasz button nazwijmy go sobie UpgradeButton

6:37button to sie rowna styled TouchableOpacity

6:47i tak ustawmy mu background color żeby jakiś tam miał

6:52na przykład niebieski bo bo upgrade

6:56będzie fajnie i żeby miał jakiś padding

7:00wewnątrz na przyklad 8px tu oczywiście nie średnik

7:04i dodajmy jeszcze UpgradeButtonText

7:09to się równa styled Text

7:18i na przykład ustawmy mu color white o nie ma white ale to ciekawe jaki to jest whitesmoke

7:23no nic zostawmy to tak UpgradeButton UpgradeButtonText

7:29reload

7:33oczywiście typowy błąd bo w Styled Components już nie

7:37musimy podawać tego jako tekst no i fajnie mamy nasz button

7:42zauważcie że działa tak samo tutaj tak samo tutaj to co mi się nie podoba to tak fajnie jakby jakiś miał border radius

7:47żeby to nie bo takie ostre na przykład 4 pixele

7:51świetnie i żeby miał jakiś margin-top

8:00oczywiście w przypadku takich drobnych zmian ja sobie tutaj w tej chwili wymyślam

8:04bo nie działam według jakiegoś projektu graficznego najprawdopodobniej w pracy będziecie

8:09mieli po prostu zdefiniowany projekt najłatwiej oczywiście mieć taki symulator albo obok

8:13naszego edytora tekstowego albo w innym na innym

8:17monitorze a ja jakby ja nie mam tutaj jakichś wytycznych więc mogę sobie pozwolić na to żeby tak tak

8:21latać okej super mamy działa nasz wywołanie upgrade level i

8:28w sumie możemy na tym zakończyć ale jest jeszcze jedna rzecz którą chciałem wam pokazać onPress

8:33to jest taki już takie kliknięcie które jest wywoływane zauważcie jeśli wyczyszczę te logii

8:37tylko w konkretnych warunkach czyli klikam i jest natomiast

8:41jesli przytrzymam dłużej ten button i puszczę to już ten upgrade level nie jest wywoływany

8:45dlatego że kliknięcie jako takie

8:49zdefiniowane jako musi być puszczenie

8:54tego przycisku musi być w jakimś tam czasie od jego kliknięcia jeśli to jest dłużej niż jakiś tam

8:58threshold którego nie znam powiedzmy 200 ms no to on nie traktuję tego jako kliknięcie

9:02tylko być może przypadkowe tam przeswipowanie czy coś takiego tak samo jeśli puścimy

9:07zjedziemy poza poza kontener tego buttona ale byćmoże

9:11czasem chcielibyśmy reagować na samo wciśnięcie albo puszczenie i taką

9:15opcję też mamy i do tego służą nam propsy onPressIn i

9:20onPressOut raczej się ich jakoś

9:25tak często nie używa aczkolwiek no warto zdawać sobie sprawę że takie istnieją out

9:36i zobaczmy jak to działa klikam

9:40onPressIn trzymam dość długo puszczam jest onPressOut

9:44i tyle natomiast jak kliknę przeczyszczę jeszcze raz kliknę sobie to szybko

9:48zauważcie że mamy najpierw onPressIn najpierw jest OnPressOut a potem Upgrade level

9:52zresztą widać po czasie że nasz onPress jest wywołany

9:57dokładnie w czasie momentu onPressOut oczywiście po nim czyli jakby w tym miejscu jest

10:01sprawdzane czy gdzieś ten nasz threshold czasu został został

10:05nie został przekroczony tak żebyśmy mogli potraktować

10:09to jako kliknięcie no i tak naprawdę jeśli chodzi o takie podstawowe buttony to tyle