Webview to wbudowana przeglądarka, której można używać do wyświetlania stron internetowych w aplikacjach React Native. Może wyświetlać wszystko, od niestandardowych elementów HTML po całe aplikacje internetowe w React Native.
W React Native możemy korzystać z Webview za pomocą pakietu innej firmy o nazwie,Reaguj-natywna-webview. To jest oficjalna implementacja przeglądarki internetowej po jej usunięciu z programuReaguj natywny rdzeńaby rdzeń był jak najbardziej chudy.
W tym poście zamierzamy zaimplementować prosty projekt, aby zobaczyć, jak pracować z Webview na React Native i jakie są niektóre z dobrych przypadków użycia, które obsługuje.
Utwórz projekt React Native
Aby rozpocząć, musimy rozpocząć nowy projekt z React Native CLI. Możesz to zrobić z expo, jeśli nie chcesz przechodzić przez żmudny proces instalacji.
npx react-native init Experimenting WithWebviewZ Expo:
Jeśli korzystasz z Expo, możesz od razu przejść doImplementacja podstawowego WebViewpo tym.
instalacja expo reaguje-rodzinny-widok internetowyDodaj zależności
// Dlanp użytkownicynp zainstalowaćReaguj-natywna-webview// Jeśli używaszprzędzaprzędza dodaćReaguj-natywna-webviewŁącz natywne zależności
Będziesz tego potrzebować tylko wtedy, gdy nie używasz Expo i używasz React Native CLI do rozpoczęcia projektu.
Jeśli używaszreaguj natywnie≥ 0.60 automatyczne łączenie zajmie się tym krokiem, więc możesz pominąć, ale nie zapomnij uruchomićinstalacja pod
reaguj natywniepołączyćReaguj-natywna-webviewJeśli kiedykolwiek odinstalujesz ten pakiet,
reaguj-natywna odłącz reaguj-natywna-webviewNa iOS i macOS
Jeśli używasz kakaopodów, wios/LubSystem operacyjny Mac/prowadzenie katalogu,
strąkzainstalowaćDla Android
Jeśli używasz react-native-webview < 6: Możesz pominąć
Jeśli używasz React-native-Webview ≥ 6.x.x
Upewnij się, że AndroidX jest włączony w twoim projekcie, edytującandroid/gradle.properties
android.useAndroidX=trueandroid.enableJetifier=trueSą szanse, że jest to już zrobione automatycznie przez React Native CLI.
Implementacja podstawowego WebView
Nadszedł czas, aby pozbyć się kodu kotłowego w środkuaplikacja.jsi napisz nasz kod dla webview.
// Aplikacja.jsimportReagowaćz "reagować";import {Bezpieczny widok obszaru,Pasek stanu} z „reaguj natywnie”;import {WebView} z „React-native-webview”;konst Aplikacja = () => { powrót ( <> <Pasek stanu barStyl="ciemna zawartość" /> <Bezpieczny widok obszaru styl={{przewód: 1 }}> <WebView źródło={{ur: „https://medium.com/” }} /> Bezpieczny widok obszaru> > );};eksport domyślnyAplikacja;To wszystko, co musisz zrobić, aby wyświetlić stronę internetową w swojej aplikacji.
źródłoBiała listarekwizyt
To jest lista ciągów pochodzenia, po których możesz nawigować w komponencie webview. Zajmuje tablicę ciągów znaków. Domyślnie jego wartości to,http://Ihttps://. Jeśli użytkownik przejdzie do nowej strony, której źródła nie znajdują się na białej liście, adres URL będzie obsługiwany przez system operacyjny.
<WebView źródło={{ur: „https://www.educative.io/” }} źródłoBiała lista={["https://*", "git://*"]}/>Ładowanie lokalnych/wbudowanych plików HTML
Możesz także ładować lokalne lub wbudowane pliki HTML do Webview i w ten sposób możesz to osiągnąć.
konstźródłoHtml= wymagać("./źródło/index.html"); // twój plik html tutajeksport konst Aplikacja = () => <WebView źródło={{HTML:źródłoHtml}} />;Lub dodaj wbudowany kod HTML.
eksport konst Aplikacja = () => { konsthtmlŹródło= „Witaj świecie 🌍
”; powrót ( <Bezpieczny widok obszaru styl={{przewód: 1 }}> <WebView źródło={{HTML:htmlŹródło}} /> Bezpieczny widok obszaru> );};
Wstrzykiwanie niestandardowego javascript do przeglądarki internetowej
Możesz także dodać własny skrypt javascript, który można uruchomić w przeglądarce internetowej. Możesz go użyć do manipulowania zachowaniem ładowanej witryny zgodnie z własnymi potrzebami.
Można to zrobić na dwa sposoby:
wstrzyknięty JavaScriptrekwizytwstrzykiwać JavaScriptmetoda
Ich nazwy mogą być mylące, więc należy je zrozumieć na podstawie ich celu, będzie to dla ciebie jasne na kilku przykładach.
wstrzyknięty JavaScriptrekwizyt
To jest rekwizyt do komponentu Webview, który zawiera skrypty uruchamiane po pierwszym załadowaniu strony internetowej. Działa tylko raz, nawet jeśli strona internetowa zostanie ponownie załadowana lub opuszczona.
Na przykład
importReagowaćz "reagować";import {Pogląd} z „reaguj natywnie”;import {WebView} z „React-native-webview”;konst Aplikacja = () => { konstskrypty= `document.body.style.backgroundColor = 'gorący róż'; document.querySelector("h1").style.color = 'niebieski'; document.querySelector("p").style.padding = '20px'; PRAWDA;`; powrót ( <Pogląd styl={{przewód: 1 }}> <WebView źródło={{ur: „https://www.example.com/” }} wstrzyknięty JavaScript={skrypty} /> Pogląd> );};eksport domyślnyAplikacja;
wstrzykiwać JavaScriptmetoda
Jak wiemy powyższewstrzyknięty JavaScriptprop, o którym mówiliśmy, działa tylko przy pierwszym ładowaniu i nie ma innego sposobu, jeśli chcemy uruchamiać skrypty wielokrotnie lub nawigować po stronie. Dlatego Webview ujawnia tę metodęwstrzykiwać JavaScriptna jego referencję.
Przykład
importReagowaćz "reagować";import {Pogląd} z „reaguj natywnie”;import {WebView} z „React-native-webview”;konst pobierz losowy kolor = () => { pozwalaćlisty= "0123456789ABCDEF"; pozwalaćkolor= "#"; Do (pozwalaćI= 0;I< 6;I++) {kolor+=listy[Matematyka.podłoga(Matematyka.losowy() * 16)]; } powrótkolor;};klasa Aplikacja rozciąga się Reagować.Część { renderowanie() { konst skrypty = () => { konstkolor= pobierz losowy kolor(); powrót `document.body.style.backgroundColor = '${kolor}'; document.body.style.color = '${kolor}'; document.body.querySelector("a").style.color = '${kolor}'; PRAWDA;`; }; ustaw Interwał(() => { Ten.webref.wstrzykiwaćJavaScript(skrypty()); }, 500); powrót ( <Pogląd styl={{przewód: 1 }}> <WebView ref={R => (Ten.webref=R)} źródło={{ur: „https://www.example.com” }} /> Pogląd> ); }}eksport domyślnyAplikacja;
Chociaż wszystkie te sposoby mogą pomóc w manipulowaniu przeglądarką internetową zgodnie z własnymi potrzebami, jeszcze jednym wymaganiem może być wysyłanie lub odbieranie danych ze strony internetowej w WebView. Teraz omówimy, jak możesz komunikować się między swoim JS a aplikacją React Native.
Komunikacja między JS a React Native
Wymaga to użycia dwóch rzeczy:
window.ReactNativeWebView.postMessagefunkcjonowaćw wiadomościrekwizyt
Thewindow.ReactNativeWebView.postMessageto funkcja, która jest narażona na wstrzyknięte skrypty wewnątrz WebView. Zasadniczo możesz przekazać do niego wszystko, pod warunkiem, że są one odpowiednio serializowane. Będzie to jasne w poniższym przykładzie.
Odpoczywaj osobno, co*kolwiek mijasz w środkuWyślij wiadomośćmożna uzyskać dostęp w React Native poprzez przekazane wywołanie zwrotnew wiadomościrekwizyt.w wiadomościjest rekwizytem dla Webview, który przyjmuje wywołanie zwrotne i jest wyzwalany za każdym razem, gdy wiadomość jest wysyłana za pomocąWyślij wiadomość.
Przykład
importReagowaćz "reagować";import {Pogląd} z „reaguj natywnie”;import {WebView} z „React-native-webview”;konst pobierz losowy kolor = () => { pozwalaćlisty= "0123456789ABCDEF"; pozwalaćkolor= "#"; Do (pozwalaćI= 0;I< 6;I++) {kolor+=listy[Matematyka.podłoga(Matematyka.losowy() * 16)]; } powrótkolor;};klasa Aplikacja rozciąga się Reagować.Część { renderowanie() { konst skrypty = () => { konstkolor= pobierz losowy kolor(); powrót `document.body.style.backgroundColor = '${kolor}'; document.querySelector("h1").style.color = 'gorący róż'; window.ReactNativeWebView.postMessage(document.body.style.backgroundColor); PRAWDA;`; }; ustaw Interwał(() => { Ten.webref.wstrzykiwaćJavaScript(skrypty()); }, 500); powrót ( <Pogląd styl={{przewód: 1 }}> <WebView ref={R => (Ten.webref=R)} źródło={{ur: „https://www.example.com” }} w wiadomości={wydarzenie =>konsola.dziennik(wydarzenie.natywneZdarzenie.dane)} /> Pogląd> ); }}eksport domyślnyAplikacja;To po prostu rejestruje kolor tła strony internetowej za każdym razem, gdy zostanie zmieniony. Jak widać, przekazujemy wywołanie zwrotne do środkaw wiadomościprop, który jest uruchamianyWyślij wiadomość.
Rzeczywisty obiekt zdarzenia, który jest przekazywany do środkaw wiadomościoddzwonienie to jest to[nativeEvent.data](http://nativeevent.data)to argument, który przekazaliśmy w środkuwindow.ReactNativeWebView.postMessage.
{„wydarzenie natywne”: {„canGoBack”: FAŁSZ,„Może iść do przodu”: FAŁSZ,"dane": "rgb(247, 75, 142)","Ładowanie": FAŁSZ,"cel": 15,"tytuł": „Przykładowa domena”,„URL”: „https://www.example.com/” }}Obsługa zmian stanu nawigacji
Teraz omówimy, w jaki sposób można przechwycić, ilekroć użytkownik przechodzi w przeglądarce internetowej do innej strony internetowej lub klika dowolny link. Możesz nawiązać połączenie zwrotne, które nastąpi za każdym razem, gdy zmieni się trasa.
onNavigationStateChangerekwizyt
Wymaga to wywołania zwrotnego, które jest wyzwalane za każdym razem, gdy użytkownik porusza się w widoku internetowym. Przekazuje bieżący stan nawigacji jako argument, do którego można uzyskać dostęp w wywołaniu zwrotnym.
Przykład
importReagowaćz "reagować";import {Pogląd} z „reaguj natywnie”;import {WebView} z „React-native-webview”;klasa Aplikacja rozciąga się Reagować.Część { handleNavigationStateChanged = navState => { konst {adres URL,tytuł} =navState;konsola.dziennik({adres URL,tytuł}); }; renderowanie() { powrót ( <Pogląd styl={{przewód: 1 }}> <WebView ref={R => (Ten.webref=R)} źródło={{ur: „https://www.example.com” }} onNavigationStateChange={Ten.handleNavigationStateChanged} /> Pogląd> ); }}eksport domyślnyAplikacja;PodstawowynavStateprzekazywana struktura parametrówhandleNavigationStateChanged:
{„canGoBack”: FAŁSZ,„Może iść do przodu”: FAŁSZ,"Ładowanie": FAŁSZ,"cel": 3,"tytuł": „Przykładowa domena”,„URL”: „https://www.example.com/”}
Podobnie jak fajny projekt, możesz bawić się WebView i korzystać z wielu dostępnych metod, takich jakidź naprzódIWróć,stopŁadowanie(lub nawet dodaćobsługa Apple Pay), aby odwzorować działanie podobne do przeglądarki dla użytkowników, tak jak mywstrzykiwać JavaScriptmetoda powyżej.
Bibliografia
Możesz odwołać się do React Native WebViewdokumentymieć przegląd wszystkiego, co oferuje lubstrona z referencjamiaby zapoznać się ze wszystkimi dostępnymi rekwizytami i metodami. Jeśli nie masz ochoty na powyższy projekt, możesz to przejrzećporadnik blogowyjeśli kiedykolwiek utkniesz.
