React Native: Static (HTML)

0.62.2+

0:00W poprzedniej lekcji zrobiliśmy sobie taką naszą apkę hybrydową

0:04z jakąś tam stroną którą zagnieździliśmy pokazaliśmy sobie w jaki sposób można

0:08się komunikować i jak możemy reagować na to co się dzieje wewnątrz tego webview a

0:12teraz zrobimy sobie wersję statyczną tak naprawdę

0:17ona się będzie różnić tylko tym że wymieńmy sobie nazwy

0:22nazwiemy sobie static aczkolwiek to nie ma żadnego znaczenia i zamiast URI

0:27tutaj wpiszemy sobie po prostu html-a na przykład wpiszemy

0:31h1 title i

0:38zrobimy sobie jakiś paragraf description

0:42description okej tak

0:47to nam nie będzie potrzebne już albo niech zobie zostanie w sumie zobaczymy

0:51no i coś tam mamy jest tak jest nasz description jest title wyrenderował nam się

0:55nasz html i teraz

0:59zobaczmy co jeszcze z tym możemy zrobić fajną opcją

1:03jest to że możemy sobie napisać js-a

1:08const injectJs którego tutaj

1:14wstrzykniemy na przykład zrobimy sobie document query all selector

1:22jeśli dobrze pamiętam okej

1:26czyli tutaj nie query all selector tylko query selector all po znaczniku p

1:32i na przykład for each możemy zrobić p kropka style kropka

1:39no na przykład fontSize oczywiście piszemy uppercasem

1:44bo piszemy w js tutaj a nie jako w css i na przykład niech to się równa

1:4820 pikseli i jeśli

1:52się nie pomyliłem nigdzie mam nadzieję że nie to

1:59to powinno zadziałać zobaczymy okej

2:05to zrobimy inaczje zdublujmy to sobie dodajmy

2:10sobie tutaj coś potrzebnego na przykład alert hello

2:16zobaczmy aha no tak

2:20napisałem ten skrypt a nic z nim nie zrobiłem więc

2:24no nie ma co się dziwić mamy takiego propsa jak injectedJavaScript i to tutaj

2:28możemy go wrzucić bez tego mogło być ciężko żeby to się uruchomiło

2:32zobaczmy widzicie

2:38z poziomu aplikacji byliśmy w stanie wyświetlić alert wyrzucając

2:43wstrzykując tego js-a do naszego kodu fajnie ale poza tym

2:47no właśnie chcielibyśmy zrobić zmienić font i

2:51zobaczymy czy to zadziała czy coś tutaj w tym skrypcie źle napisałem chyba zadziałało

2:57jeszcze mógłbym to zmienić na 50 okej zobaczmy

3:02tak jest jak widzicie po

3:06załadowaniu strony został wstrzyknięty nasz kod który zmieniał font size temu

3:10wszyscy paragrafom p tak to fajne kolejne praktyczne

3:14użycie w aplikacji z newsami które wyświetlały właśnie takie artykuły

3:19w formie zagnieżdżonego webview była funkcjonalność

3:23zmiany fonta czytanego tekstu no i z racji tego że

3:27to nie był tekst wyświetlany to nie był komponent tekst w react native

3:33gdzie moglibyśmy po prostu na przykład naszym theme zmienić jakiś font tylko to

3:37było webview poprzez takie inject javascript mogliśmy sobie

3:41go zmienić jeszcze jedną rzecz którą można też zauważyć a to jest to że okej to

3:45działa na początku tak ale co jeśli na przykład teraz chcielibyśmy dodać

3:50button którego tutaj dodamy już dodamy jako zwykły

3:55button żeby było szybciej nazwę go make it

4:01bigger on press

4:06i dodamy sobie function on

4:10make it bigger to w tym

4:18momencie chcielibyśmy czy ten button jest w ogóle widoczny nie jest widoczny to dlatego

4:22że nasz static web view ma height 100% ale

4:26jak mu damy flex 1 to powinno być okej dobra

4:32żeby tutaj nie kombinować bo nie jest to sednem tej lekcji toustawimy na

4:36sztywno 500px po prostu okej aha

4:42no fajny błąd niestety to poza kontenerem nie będzie widoczne no super

4:46mamy nasz przycisk i chcielibyśmy żeby ten skrypt fajnie że się wywołuje na starcie nie

4:50to ale żeby on sie wywołał dopiero po kliknięciu na nasz przycisk czyli jeszcze raz to przeładowuje

4:54i po kliknięciu żeby nam się ten tekst zmieniał i możemy

4:58to zrobić używając prostu referencji do tego wabview czyli

5:03webView useRef null oczywiście musimy to zaimportować

5:09i

5:14przypiszemy sobie tutaj naszego refa teraz

5:18w tym momencie możemy sobie wywołać webView oczywiście current kropka

5:24inject Js jeśli mnie pamięć nie myli inject

5:29Js no i teoretycznie to

5:34już może zadziałać zobaczymy nie czyli

5:38to nie jest injectJs czyli nasza metoda to jest inject

5:43JavaScript okej teraz

5:47jest już poprawnie no i teraz to już powinno ładnie wykonać sprawdźmy make it bigger

5:53świetnie tak czyli możemy sobie nie tylko jakby na

5:57starcie ładować tego javascripta ale dowolnym momencie no właśnie w konkretny przypadeku użycia to jest

6:02taki że możemy zmniejszyć sobie font tekstu w naszym artykule a

6:06no jeśli chodzi o webview to tyle natomiast teoretycznie coś

6:10co jest mało przydatne w praktyce się okazuje że bardzo często tego wykorzystujemy więc warto warto

6:14zgłębić to dość dość zaawansowane

6:18narzędzie w gruncie rzeczy jeśli uwzględnimy możliwość komunikacji z naszą natywną js-ową

6:23stroną to tyle