React Native: Główne komponenty

0.62.2+

0:00Okej to pokazaliśmy sobie jak uruchomić nasza aplikację

0:04jak ją w podstawowy sposób debugować no to teraz powiedzmy

0:08sobie faktycznie jak taką aplikację się robi przede wszystkim usuńmy sobie

0:12wszystko co mamy w naszym pliku App.js bo nie będzie nam to potrzebne

0:18i krótki wstęp tak jak już mówiłem

0:22React Native mocno nie tyle inspiruje się co bazuje na React'cie

0:26czyli na frameworku do tworzenia

0:31aplikacji webowych no i tam w React'cie czy po prostu w sytuacji

0:35w której robimy aplikację webową korzystamy ze znaczników html taki

0:39główny znacznik to oczywiście div mamy też oczywiście parę innych jak section

0:43mamy takie znaczniki jak tekstowe jak

0:47h1 gdzie możemy sobie jakiś tekst napisać mamy

0:52znaczniki paragrafu gdzie też możemy jakiś opis sobie

0:56dodać i tak dalej i tak dalej jakby bezpośrednio tych znaczników w

1:01React Native nie mamy ponieważ tak jak pokazywałem ten

1:05nasz kod jest tłumaczony na kod natywny w związku z tym

1:09te znaczniki musiały być troszeczkę zmienione i natomiast

1:14one są bardzo podobne w związku z tym podstawowym elementem

1:18podstawowym znacznikiem którego używamy w React Native jest

1:23znacznik View ten znacznik można powiedzieć że jest takim odpowiednikiem

1:27diva ale to tak naprawdę jest po prostu widok czyli

1:31pusty kontener który może zawierać jakieś style jeśli

1:35sobie odpalimy naszą aplikację zobaczymy że w tej chwili

1:39nic tutaj się dzieje ponieważ nasz View jest pusty i

1:43możemy sobie na przykład go jakoś ostylować podobnie jak w przypadku React'a

1:47możemy sobie zrobić taki inline stylowania i ustawić

1:51mu backgroundColor oczywiście z racji tego że to są inline style to piszemy je tutaj camelcasem

1:55i na przykład dać color red backgroundColor

2:04color red

2:11a oczywiście ustawiłem color red ale jakby nie wiadomo jak

2:15jaki ten View ma rozmiar w związku z tym nic się nie wyświetla prawidłowo

2:20więc musimy mu ustawić jakiś rozmiar ustawmy mu

2:24width 100% i height 100%

2:28i w tej chwili widzimy że nasz widok jest jakby na

2:32całym ekranie dostępny i te widoki oczywiście możemy

2:36sobie zagnieżdżać dowolnie czyli możemy sobie zrobić tutaj View i

2:42na przykład dopisać sobie jeszcze jeden View który

2:47na przykład będzie miał style backgroundColor

2:51blue width

2:55będzie miał na przykład 100% ale tu musimy wszystko jako tekst

3:00przekazywać i na przykład wysokość będzie miał 200 i zobaczmy

3:05tak i mamy tutaj zagnieżdżony View w naszym

3:09View i teraz pierwsza rzecz jaka się rzuca w oczy to

3:14to że nie podejemy tu żadnych jednostek znaczy jeśli ja tutaj podam pixele to dostaniemy

3:18błąd dlaczego dlatego że w przypadku React Native nie mamy do

3:22dyspozycji takich jednostek jak w przypadku Reacta i generalnie przeglądarki

3:27programowania aplikacji webowych czyli pixele emy remy

3:31i wiele takich podobnych tworów mamy tak naprawdę

3:37pixel independent density jednostki czyli to jest po prostu minimalna jednostka

3:41jakby bez minimalna jednostka jaką możemy użyć nie

3:46podajemy do tej żadnych jednostek to po prostu jest 200 wartość która troszkę inaczej będzie wyglądała

3:50na przy różnych rozdzielczościach i po prostu nie powinniśmy sie tym przejmować to jest w

3:54ten sposób wyświetlamy stylujemy rozmiar jakiegoś tam elementu

4:00okej czyli mamy takie podstawowe podstawowy

4:04znacznik View mamy zagnieżdżenie w

4:08tych View no i teraz chcielibyśmy na przykład wyświetlić jakiś tekst i tak

4:12jak w przypadku dlaczego w html mamy h1

4:16czy czy właśnie znaczniki paragrafu tutaj mamy jeden ogólny znacznik tekst

4:20i w tym tekście możemy sobie wypisać na przykład Hello

4:25jak widać nasz znacznik jest tutaj wyświetlany

4:29tuż pod tym ponieważ domyślny to jest po prostu wertykalnie ułożone

4:34i wprowadźmy sobie tu jakiś jakieś imię na

4:38przykład Jan Nowak fajnie

4:44naszym jest wyświetlane załużmy że to jest jakiś tam nasz profil i

4:49możemy sobie poniżej wyświetlić jeszcze jakiś description

4:53czyli something cool here cokolwiek

4:58to będzie później oczywiście też możemy sobie wystylować na

5:05przykład fontSize i możemy podać że to jest 20 żeby

5:10ten Jan Nowak był troszeczkę troszeczkę większy

5:14z takich komponentów

5:18które które mogą nam się przydać będą nam się przydawały to jeszcze bardzo istotny jest

5:22komponent Image czyli jeśli chcielibyśmy wyświetlić jakąś grafikę na

5:27przykład Image wyświetlamy sobie Image

5:32czyli oczywiście to jest nasza grafika to możemy zrobić na dwa sposoby

5:36po pierwsze właściwie na jeden sposób ale z dwoma źródłami

5:40czyli po pierwsze możemy sobie wyświetlić coś i możemy

5:44tutaj wkleić po prostu jakiś link do naszego obrazka Image jest na defined musimy

5:48go oczywiście sobie wyeksportować w tym miejscu i zobaczmy

5:52jak to wygląda nie wygląda nie wygląda dlatego że znowu

5:56ta nasza grafika nie ma zadnych styli więc nie będzie wiedziała jaki ma mieć rozmiar i

6:00załóżmy że to będzie miało 100 na 100 i

6:06mamy naszą grafikę fajnie jakby jak sobie odświeżymy nasz

6:10projekt to zobaczymy że ta grafika jest no ale oczywiście się scache'uje więc wyświetli

6:14nam się automatycznie ale równie dobrze moglibyśmy taką

6:18grafikę załadować lokalnie co chyba w tym

6:22wypadku chcielibyśmy zrobić więc jak to zrobimy po pierwsze

6:27musimy stworzyć sobie jakiś folder z assetsami nie tutaj tylko

6:32na przykład tutaj assets

6:36i musimy do tego folderu wrzucić naszą grafikę więc

6:40przeciągniemy sobie grafikę którą już wcześniej pobrałem mamy naszego

6:45Lorda Vadera i musimy sobie tą grafikę tutaj

6:49załadować do tego nam posłuży operator require zrobimy

6:54sobie naszą profileImage to się równa require

6:58assets image.jpg okej

7:06no i teraz zamiast a może pokazać że to działa to

7:11zrobimy sobie tutaj po prostu nasze

7:16profileImage okej jak

7:20widać mamy dwa obrazki pod sobą jeden jest ładowany lokalnie drugi jest ładowany

7:24z url-a i teraz

7:28jeszcze tylko taki problem okej tutaj akurat ta grafika idealnie się nam wpasowała ale co jeśli ja bym na

7:33przykład tutaj ustawił szerokość na 50 okej

7:37fajnie ucięło mi tą grafikę wycentrowało mi ja ale mamy parę innych

7:41opcji które możemy tutaj zrobić predefiniowalnie opcji których możemy użyć i to się jakby

7:46jedną z ważnych parametrów tego Image jest nasz props

7:50resizeMode w którym to możemy wybrać w jaki sposób nasza grafika ma być wyświetlana

7:55czyli chyba domyślnie właśnie to jest center nie bym domyślnie to było

8:00widocznie coś innego natomiast jeśli ustawimy sobie właśnie parametr center to zauważmy

8:04że mimo tego że nasz Image tak naprawdę jest większy to nasza

8:08grafika zostanie wycentrowana w nim i przeskalowana możemy sobie ustawić

8:12na przykład contain to spowoduje tutaj akurat w tym przypadku to samo co

8:16center czyli że nasza grafika zawsze cała się będzie mieścić czyli jeśli ja zmienię

8:20dalej szerokość na przykład na 30 to jakby ta grafika i

8:24tak będzie skalowana tak żeby cała była wyświetlana wewnątrz tego naszego kontenera

8:28jakim jest Image mamy też parę innych opcji

8:32i możemy sobie na przykład zrobić cover i to spowoduje że cała

8:37grafika będzie wypełniać nas kontener czyli jeśli

8:41nawet ten kontener jest mniejszy od tej grafiki jak widać tutaj to ona utnie

8:46nam tą grafikę natomiast zawsze kontener będzie wypełniony

8:50a jeśli chcielibyśmy żeby ta grafika była

8:54widoczna w stu procentach i dopasowywała się no to możemy korzystać ze stretcha

8:58czyli że nasza grafika się rozciągnie raczej rzadko się z tego korzystać bo

9:02tracimy w tym momencie proporcje tego obrazka no

9:06ale może w jakiś przypadkach być to potrzebne ostatnim

9:11ostatnią opcją jakiej możemy użyć w przypadku resize'a jest repeat

9:15czyli to się nam przyda jeśli na przykład ten width będzie bardzo szeroki

9:19czyli na przykład będzie mieć 500 to nasza grafika może się tutaj

9:24zduplikować jakby w odpowiedniej

9:28ilości tak żeby dopasować się do szerokości elementu no ale raczej też

9:32zbyt czasu się z tego nie korzysta zostawmy sobie może na

9:36razie domyślną wartość i domyślne domyślną wysokość

9:42i zobaczmy jak nasz profil wygląda no okej jakoś tam wygląda

9:46nie jest źle jest tylko jedna rzecz która

9:51może się rzucać w oczy która akurat teraz może nas tak bardzo nie boli ale zauważcie że nasz View który

9:57jest tutaj wychodzi tak naprawdę

10:01ponad tego notcha który jest w iphone i dolny

10:05widok wychodzi też ponad to sie nazywa safe area

10:09na iphone czyli coś to nie jest za bardzo klikalne i tykalne bo tutaj mamy na status

10:13bars z którego wyjeżdżają nasze opcje jeszcze jeśli ja tutaj dodałem taki taki

10:18nagłówek taki header powiedzmy to to nie boli ale się sobie taki header zakomentujemy

10:22zauważcie co się dzieje tak nasza grafika wyjeżdża tutaj poza obszar w którym chcielibyśmy

10:26żeby to działało na szczęście oczywiście

10:30moglibyśmy w jaki sposób dać tutaj margines no ale jeśli zauważcie

10:34dodamy sobie margines do naszego widoku głównego albo właściwie padding do naszego

10:39kontenera paddingTop ustawimy go na 50 okej

10:44tu jest dobrze natomiast popatrzcie co tu się dzieje tak na androidzie który nie ma tych safe area

10:48no wygląda to kiepsko i jak sobie z tym najlepiej poradzić na szczęście

10:52React Native daje nam gotowy komponent który nam pozwala nie

10:57martwić się tym problemem ten komponent nazywa się SafeAreaView i

11:01on tak naprawdę jak zaraz zobaczymy opakowuje nasz

11:05kontener właśnie w tą bezpieczną strefę w której

11:09możemy renderować elementy które są klikalne i z których jej użytkownik

11:14może korzystać i teraz sobie usuńmy nasz padding i zauważmy że teraz

11:18w obu przypadkach nasze elementy są dopasowane do góry ale

11:22nie są nie wykraczają poza ten obszar który nie jest klikalny i do którego w którym za którym

11:27nie chcielibyśmy się chować