React Native: Dynamic (apka Hybrydowa)

0.62.2+

0:00Na poprzednich lekcjach zrobiliśmy sobie nasza listę zoptymalizowaliśmy ją a teraz

0:04chciałbym zrobić coś troszeczkę innego ale coś co też może nam się przydać to

0:09znaczy chciałbym żebyśmy w naszej aplikacji zagnieździli

0:13sobie kod html bo bardzo często jest taki przypadek jest takie

0:17wymaganie przykładem może być na przykład aplikacja z newsami bardzo

0:21często ten content który dostajemy z backendu jest jakimś WYSIWYG-iem

0:25albo po prostu linkiem no i musimy go jakoś zagnieździć no i teraz pokażę wam jak to

0:29zrobić najłatwiej to z czego musimy skorzystać to

0:34jest component web view z tym że w świecie React Native coraz

0:38częściej te wszystkie komponenty te wszystkie biblioteki są odseparowywane od takiego

0:42core'a i przez to musimy sobie to zainstalować z

0:47osobnej paczki tak czyli mamy w react native community mamy nasz kkomponent react native webview

0:51tutaj w na GitHubie mamy jego

0:55całą dokumentację można sobie to przejrzeć musimy to sobie zainstalować istalujemy to

0:59tutaj sobie zapisałem instalujemy sobie npm

1:04install save react native web webview okej lecimy z tym okej i

1:12tutaj jest mała dygresja ale bardzo istotna w przypadku pewnych pakietów

1:17może się okazać że tak jak pokazywałem wam całą

1:21strukturę zależności na naszym projekcie React Native'owym

1:25androidowym i iOS-owym to projekty w iOS-ie mają to do siebie

1:31że nie instalują się automatycznie to znaczy często po zainstalowaniu

1:35takiego pakietu my musimy jeszcze doinstalować pakiety natywne

1:39w przypadku androida dzieje się to automatycznie natomiast w przypadku iOS-a musimy to zrobić i wtedy wchodzimy sobie

1:43do folderu cd znaczy folderu ios i tutaj wybieramy sobie

1:48pod instal tego nie musimy robić jeśli mamy expo

1:52ale właściwie wtedy tego nie jesteśmy w stanie zrobić bo nie mamy

1:56tego folderu ios i nie mamy też tego problemu jak widać zainstalowała nam się paczka

2:01natywna react native webview poczekamy aż to się wszystko

2:06ładnie zainstaluję świetnie i dobrze w tym momencie przeinstalować

2:11zbudować na przeinstalować właściwie zbudować na nowo nasz projekt piszemy sobie yarn ios

2:16przy czym tak jak mówię ja startuję sobie yarn ios

2:20startuję nam nasz metro bundler i przy okazji odpala apkę

2:24ale tak naprawdę skoro bundler jest ten sam jego adres się nie zmienił to na androidzie też to

2:28będzie działać ale cóż pewnie zauważyliście czyli niech nam się to zbuduję w tej chwili

2:32could not connect to development server

2:37niech to się nam ładuje a my w międzyczasie możemy sobie podziałać

2:41czyli to co zrobimy to będzie nazwiemy to sobie Dynamic

2:45i tutaj to wstawimy okej

2:54zbudował się nasz projekt trochę to trwało ale mamy to co w tej chwili

2:59w tej chwili musimy zaimportować sobie to nam nie będzie potrzebne musimy zaimportować

3:05sobie nasze weby czyli robimy import WebView from

3:11react native webview

3:15i użyjemy go sobie tutaj ustawimy mu tak width 100%

3:21height 100% okej

3:27zobaczmy czy to działa w ogóle wygląda na to

3:31że działa odpalmy sobie androida reload

3:39być może musimy sobie zbudować

3:44jeszcze raz projekt androida ale to na tej lekcji nie jest dla nas

3:48aż tak potrzebne zostańmy sobie na razie przy tym iOS-ie okej czyli mamy nasze webview

3:52jakoś tam działa znaczy nic się na razie nie dzieje więc to nie szkodzi żeby

3:56działało ale tak zrobimy sobie jako nazwałem je Dynamic

4:00z tego względu że chcemy żeby załadowało nam to jakieś jakiś

4:04url z zewnątrz czyli na przykład a nich zrobimy sobie tutaj

4:08stronę google.pl whatever

4:13okej

4:18i spróbujmy to sobie zreloadować okej

4:22nic nam się nie dzieje spróbujemy

4:28tak source i

4:34teraz tak dodamy sobie możemy dodać sobie takie propsy

4:38takie funkcje propsa które nam będą renderowały

4:43dany komponent na przykład w momencie ładowania naszej

4:47strony i tutaj sobie dodajmy bo widać że coś tam się ładuje ładowanie zobaczmy

4:53czy to jest w ogóle widoczne okej

4:58nie jest widoczne to wynika najprawdopodobniej z tego warto byłoby to opakować w coś

5:02więc tak zróbmy bo nie zawsze to jest też częsty problem

5:06React Native'a pewnych komponentów i trzeba je czasem opakować po prostu w

5:11jakieś kontenery dla świętego spokoju z FlatListą

5:15czasem bywa podobnie w pewnych sytuacjach więc dla spokoju można sobie to

5:19po prostu opakować to sobie skopiujemy

5:24i przynieśmy sobie tutaj i

5:28opakujmy to wszystko w nasz kontener teraz

5:32mi się wydaje że powinno być okej okej no i mamy naszą stronę google

5:36zauważcie jedną rzecz że tak naprawdę w tej chwili zrobiliśmy aplikację hybrydową mamy

5:42w pełni działającą aplikację stronę internetową w naszej w naszym webview i dokładnie

5:46na tej samej zasadzie działają wszystkie narzędzia które tworzą nam aplikacje

5:50hybrydowe odpalmy sobie jakąś inną stronę i proszę

5:54bardzo mamy naszą stronę z jakimiś

5:58newsami możemy sobie tutaj nawigować mamy

6:03wszystkie informacje o widzę że mamy nawet reklamy tak więc dokładnie

6:07na tej zasadzie tak jak mówiłem działają wszystkie mechanizmy które opakowują naszą stronę

6:11internetową wewnątrz takiego webview czyli wszystkie Cordova'y Ionici

6:16i tak dalej dokładnie to tak działa z tą różnicą że właściwie z tym dodatkiem

6:20że komponent webview pozwala nam komunikować się z

6:24zawartością tej strony to znaczy jesteśmy w stanie wysyłać

6:29komunikaty właściwie wywoływać kod JS w tym by w tym zagnieżdżony

6:33webview i otrzymywać informacje zwrotne i dlatego

6:37w tych narzędziach do tworzenia aplikacji hybrydowych jesteśmy w stanie korzystać z natywnych

6:42natywnych narzędzi z poziomu naszej strony ponieważ ta strona jest

6:46w stanie komunikować się z tym jakby z całą aplikacją zanim

6:50to jeszcze pokażemy to na przykład możemy dodać sobie kolejny propst

6:55który nam będzie wyświetlał coś tam jak nastąpi błąd

6:59ładowania strony na przykład wyświetlmy tu sobie

7:04Error tutaj zmieńmy na Loading żeby już się trzymać konwencji

7:08okej i na przykład coś tam jakieś głupoty wpiszemy i zobaczmy co sie stanie reload

7:15jak widać no tutaj kwestia stylowania

7:19błąd nam się wyświetlił więc widać że się nie udało załadować strony i

7:24jeśli mamy bystre oko to zauważylibyśmy też że wyświetla nam się

7:28nasze ładowanie a nie przepraszam nasze ładowanie nam sie nie wyświetla to jest trochę mało

7:32intuicyjne natomiast żeby to się działo to najlepiej to inaczej trochę

7:37działa na androidzie trochę inaczej na iOS-ie dobrze jest dodać taki parametr jak startInLoadingState

7:41na true i to oznacza że w momencie kiedy rozpoczynamy ładowanie

7:45a on na pewno nasz webview będzie w stanie loadingu co spowoduje

7:50że ten loading na pewno się nam wyświetli na starcie zobaczmy mamy

7:56loding i on znika dopiero teraz bo z punktu widzenia dopiero

8:01teraz załadowało się wszystko w tym webview tak że można powiedzieć że ta strona nam się załadowała

8:05jest to całkiem fajne i możemy jeszcze

8:09sobie zobaczyć właśnie tak powiedzmy początkowe takie

8:14ogólne elementy tej komunikacji między webview a naszą aplikacją i takim

8:18pierwszą informacją jaką możemy zwrotną jaką możemy dostać z poziomu tej strony to jest to

8:22gdzie jak wygląda nawigacja czyli on onShouldStartLoadWithRequest

8:27i tu dostajemy informację od request i musimy zwrócić czy chcemy tą

8:31stronę ładować czy nie zróbmy sobie coś takiego i wylogujmy sobie jaki

8:37to jest request czyli webview request request

8:43okej i zbudujmy

8:47zobaczmy co

8:51tu się dzieje i zobaczymy że tych requestów trochę jest głównie to będą requesty

8:56na stronie głównej tak jest czyli widzimy że main Document ... no

9:01i jakbym wyrażamy zgodę na to żeby ten i request został wykonany możemy

9:05też zwrócić tutaj false w tym momencie nic nam się nie załaduje

9:11cały czas bedzie loading dlatego że przy pierwszym możliwym request'cie właśnie

9:16do wp.pl po prostu zostanie on odrzucony i

9:21tutaj możemy sobie używać tego na przykład w sytuacji w której

9:25zagnieździmy webview w naszej aplikacji na przykład jakąś stronę artykuł ale nie chcemy

9:29żeby użytkownik mógł przejść do linków wewnątrz

9:33tej aplikacji tak czyli nie chcemy żeby nie wiem żeby się dało przejść do

9:38jakiejś tam podstrony konkretnej tutaj bo jak wyjdziemy sobie w jakąś podstronę

9:43to zobaczymy że o że wchodzimy do main Document url to

9:47jest wiadomości wp.pl coś tam coś tam coś tam tak więc moglibyśmy sobie tutaj spokojnie

9:51dodać warunek że jeśli w tym request'cie ten main Document url to możemy

9:56sobie to wylogować

10:00main Document url i wyświetlmy sobie to tutaj wyczyśćmy

10:07te logi przede wszystkim o widzimy że mamy wp.pl możemy

10:13zrobić tak tak najprościej że jeśli nasz

10:18jest różne od naszego

10:23głównego adresu to return false

10:28i w ten sposób będzie można chodzić

10:32po stronie głównej wp.pl to powinno zadziałać jednak

10:37to tak łatwo nie działa z tego względu że zapewne jakieś skrypty są doładowywane i bez nich się ta

10:41strona nie uruchomi natomiast możemy

10:46sobie zablokować na przykład zobaczmy co tu się dzieje

10:50wiadomości wp czyli jeśli to

10:55includes wiadomości to return

11:00false zróbmy strona nam

11:07się załadowała i co się dzieje a bo to jest money.pl

11:13to niestety cofamy się jeszcze

11:20raz tu gdzieś są wiadomości tak wyczyśćmy sobie logi

11:24klikamy o i widzicie nie jesteśmy przekierowani

11:29i to jest bardzo fajny feature który możemy wykorzystać właśnie w przypadku zagnieżdżania jakiś newsów

11:33naszej aplikacji no i to jest super bo tak naprawdę możemy wykorzystać

11:37naszą stronę którą mamy jakby modyfikując ją dokładnie to co robi

11:41się w przypadku aplikacji hybrydowych tylko tak naprawdę jeśli znamy React Native'a

11:45to nie mamy potrzeby opakowywania tego w jakiś czarodziejski sposób możemy sobie to tego

11:50użyć w taki dokładnie tutaj z taką dodatkową

11:54dodatkowym propsem ktory się mega może przydawać w przypadku takiej bardziej zaawansowanej komunikacji

11:59na parametr jest props onMessage i tutaj to

12:04jest każda informacja która zostanie nam zwrócona przez

12:08przez jakby stronę z tą różnicą że w tym momencie raczej

12:13tutaj nic nie zobaczymy bo nie prosimy o żadne informacje

12:17zwrotną tak jest tutaj nic nic nic nie

12:21dostaniemy natomiast przykładem kiedy moglibyśmy

12:26tego użyć jest to na przykład jeśli chcielibyśmy żeby nasz view

12:30który opakowuje ten kontener był dokładnie rozmiarów naszej strony

12:34tak bo my sobie tutaj w tej stronie na tej stronie scrollujemy i chcielibyśmy żeby

12:39żeby nasz kontener był dokładnie tej samej wysokości i

12:43wtedy jesteśmy w stanie wysłać skrypt do naszego webview który w

12:47onMessage zwróci nam informację o tym jaki jest jaki jest jaka

12:51jest wysokość dokumentu no ale jakby tym się w tej chwili nie będziemy zajmować to już są ... natomiast takie rzeczy

12:55można robić i przykład aplikacji w której to zostało użyteto właśnie była aplikacja newsowa w której ładowaliśmy

13:01jakiś jakiś news jakiś artykuł i dopasowywaliśmy

13:05wysokość naszych komponentów do wysokości webview i to

13:10tyle jesli chodzi o lekcje z dynamicznym ładowaniem w następnej powiemy jeszcze sobie chwile o statycznym

13:15czyli o ładowaniu kodu html