React Native WebView: Integrer Webindhold Sømløst

I den moderne mobiludviklingsverden er evnen til at integrere eksisterende webindhold direkte i en mobilapplikation en uvurderlig funktion. Dette giver udviklere mulighed for at genbruge webressourcer, levere dynamisk indhold og udvide funktionaliteten af deres native apps uden at skulle genopfinde hjulet. React Native, med sin kraftfulde `react-native-webview` pakke, gør netop dette muligt. Denne artikel vil dykke ned i, hvordan du kan udnytte `react-native-webview` til at indlejre alt fra simple HTML-filer til komplette webapplikationer i dine React Native-projekter.

Hvad er en WebView?

En WebView er en native UI-komponent, der giver dig mulighed for at vise webindhold inden for din native applikation. Tænk på det som et mini-browser vindue, der er indlejret direkte i din app. Dette er utroligt nyttigt, når du har webbaserede komponenter, der skal vises, eller når du ønsker at udnytte eksisterende webfunktionalitet i din mobile oplevelse. `react-native-webview` pakken er den officielle og bredt anvendte løsning til at opnå dette i React Native-økosystemet.

Kom godt i gang med React Native WebView

Før vi kan begynde at indlejre webindhold, skal vi sørge for, at vores udviklingsmiljø er sat op korrekt. Dette inkluderer Node.js, en teksteditor som Visual Studio Code og en grundlæggende forståelse af JavaScript, React Native og HTML.

Opsætning af et React Native Projekt med Expo

Expo er et populært framework til at bygge React Native-apps, der forenkler opsætningsprocessen. Vi kan hurtigt oprette et nyt Expo-projekt ved hjælp af følgende kommando:

npx create-expo-app@latest 

Når projektet er oprettet, navigerer vi ind i projektmappen og starter udviklingsserveren:

cd mit-projekt npx expo start 

Expo giver os derefter mulighed for at vælge mellem at teste på en fysisk enhed eller en emulator/simulator. Detaljerede opsætningsvejledninger findes i Expo-dokumentationen.

Installation af react-native-webview

Nu hvor vores projekt er sat op, skal vi installere `react-native-webview`-pakken. Dette gøres ved at køre følgende kommando i projektmappen:

expo install react-native-webview 

Denne pakke fungerer problemfrit på både Android- og iOS-enheder.

Grundlæggende Struktur

For enkelheds skyld vil vi placere al vores kode i filen `app/(tabs)/index.tsx` (eller `.jsx`, hvis du foretrækker det). Sørg for at slette eksisterende indhold og erstatte det med den kode, vi vil introducere.

Indlejring af Webindhold

Den mest ligetil måde at indlejre webindhold på er ved at angive en URL. Lad os starte med at indlæse LogRocket-bloggen:

import { WebView } from 'react-native-webview'; export default function HomeScreen() { return ; } 

Her importerer vi `WebView`-komponenten og bruger `source`-prop'en til at specificere den URI, vi ønsker at indlæse. `source`-prop'en forventer et objekt, der i dette tilfælde indeholder vores URL.

Indlejring af Inline HTML

Udover at indlæse eksterne URL'er kan vi også indlejre direkte HTML-kode. Dette er nyttigt for at vise brugerdefinerede beskeder eller enkle grænseflader:

import { WebView } from "react-native-webview"; export default function HomeScreen() { const customHTML = ` 
 Dette er simpel HTML 
 Denne tekst vil blive ændret! 
 `; return ; } 

Forskellen her er brugen af `source={{ html: customHTML }}`. Variabelen `customHTML` indeholder den HTML-streng, vi ønsker at vise. Vi har tilføjet simpel inline CSS for at centrere indholdet og give en sort baggrund med hvid tekst.

Kommunikation mellem JavaScript og React Native

En af de mest kraftfulde funktioner ved `react-native-webview` er muligheden for at kommunikere mellem din React Native-kode og JavaScript, der kører inde i WebView'en. Dette åbner op for dynamiske interaktioner og dataudveksling.

Brug af `injectedJavaScript` og `onMessage`

Vi kan injicere JavaScript-kode, der skal udføres, når WebView'en indlæses, ved hjælp af `injectedJavaScript`-prop'en. `onMessage`-prop'en bruges til at modtage beskeder fra JavaScript-koden.

import { WebView } from "react-native-webview"; export default function HomeScreen() { const customHTML = ` 
 Dette er simpel HTML 
 Denne tekst vil blive ændret! 
 `; const runFirst = ` setTimeout(function() { window.alert("Klik mig!"); document.getElementById("h1_element").innerHTML = "Hvad er dit yndlingssprog?"; document.getElementById("h2_element").innerHTML = "Det vil vi se!"; }, 1000); true; // Påkrævet for at undgå fejl `; const runBeforeFirst = ` window.isNativeApp = true; true; // Påkrævet for at undgå fejl `; return (  { console.log(event.nativeEvent.data); }} injectedJavaScript={runFirst} injectedJavaScriptBeforeContentLoaded={runBeforeFirst} /> ); } 

I dette eksempel:

• `injectedJavaScript` udfører en funktion efter 1 sekund, som viser en alert, ændrer teksten i `h1` og `h2` elementerne.
• `injectedJavaScriptBeforeContentLoaded` udføres før siden indlæses, og sætter en global variabel `window.isNativeApp`.
• `onMessage` er nødvendig for at scripts kan køre, selvom funktionen er tom.

Brug af `injectJavaScript`-metoden

Nogle gange er det nødvendigt at injicere JavaScript dynamisk, f.eks. baseret på brugerinteraktion. `useRef`-hook'et giver os en reference til WebView-komponenten, som vi kan bruge til at kalde `injectJavaScript`:

import { WebView } from "react-native-webview"; import { useRef } from "react"; export default function HomeScreen() { const webRef = useRef(null); const customHTML = ` 
 Dette er simpel HTML 
 Denne tekst vil blive ændret! 
 `; const runFirst = ` setTimeout(function() { window.alert("Klik mig!"); document.getElementById("h1_element").innerHTML = "Hvad er dit yndlingssprog?"; document.getElementById("h2_element").innerHTML = "Det vil vi se!"; }, 1000); true; `; const runBeforeFirst = ` window.isNativeApp = true; true; `; const injectedJavaScript = ` const languages = [ "Rust", "Python", "JavaScript", "TypeScript", "C++", "Go", "R", "Java", "PHP", "Kotlin" ]; const headerElement = document.getElementById("h2_element"); let counter = 0; const setIntervalId = setInterval(() => { if (counter === languages.length) { clearInterval(setIntervalId); window.ReactNativeWebView.postMessage("Du omdirigeres nu!"); window.location = "https://blog.logrocket.com"; return; } if (document.body.style.backgroundColor === "white") { document.body.style.backgroundColor = "black"; document.body.style.color = "white"; } else { document.body.style.backgroundColor = "white"; document.body.style.color = "black"; } headerElement.textContent = languages[counter++] + "?"; window.ReactNativeWebView.postMessage("tæller: " + counter.toString()); }, 1000); true; `; const onLoadHandler = ({ nativeEvent }) => { if (!nativeEvent.url.startsWith("http")) { // Kun injicer hvis det ikke er en ekstern URL webRef.current.injectJavaScript(injectedJavaScript); } }; return (  { console.log(event.nativeEvent.data); }} onLoad={onLoadHandler} injectedJavaScript={runFirst} injectedJavaScriptBeforeContentLoaded={runBeforeFirst} /> ); } 

Her bruger vi `useRef` til at få en reference til `WebView`-komponenten. I `onLoad`-handleren kalder vi `webRef.current.injectJavaScript(injectedJavaScript)`, hvilket udfører den angivne JavaScript-kode. Koden skifter baggrundsfarve og viser forskellige programmeringssprog med et interval, før den omdirigerer til LogRocket-bloggen. Vi bruger også `window.ReactNativeWebView.postMessage` til at sende beskeder tilbage til React Native-appen, som vi logger i `onMessage`-handleren.

Håndtering af Navigation og URL-ændringer

Det er ofte nødvendigt at overvåge navigationen inden i WebView'en, f.eks. for at begrænse brugeren til bestemte domæner eller reagere på URL-ændringer.

`onNavigationStateChange`

`onNavigationStateChange`-prop'en kaldes, hver gang navigationen starter eller slutter. Den giver os adgang til `navState`-objektet, som indeholder information som URL, loading-status, titel og om der kan navigeres tilbage eller frem:

 { console.log(navState); }} />

navState-objektet indeholder felter som: url, loading, title, canGoBack, canGoForward.

`onShouldStartLoadWithRequest`

Denne prop giver os kontrol over, hvilke anmodninger der skal indlæses. Vi kan returnere `true` for at tillade indlæsning eller `false` for at blokere den:

 { // Tillad kun indlæsning af anmodninger, der starter med LogRocket-domænet return request.url.startsWith('https://blog.logrocket.com/'); }} />

Dette er en effektiv måde at sikre, at brugeren forbliver inden for dit definerede webområde.

Tilpasningsteknikker

Du kan tilpasse udseendet og adfærden af det indlejrede webindhold yderligere.

CSS-injektion

Vi kan injicere CSS direkte for at ændre styling:

import { WebView } from "react-native-webview"; export default function HomeScreen() { const injectedJavaScript = ` const style = document.createElement('style'); style.innerHTML = 'body { background-color: grey; }'; document.head.appendChild(style); true; `; return (  ); } 

Her indlejrer vi et style-element med en grå baggrund.

Visning af Loading-indikator

For at forbedre brugeroplevelsen kan vi vise en loading-indikator, mens WebView'en indlæses:

import { WebView } from "react-native-webview"; import { ActivityIndicator } from "react-native"; export default function HomeScreen() { return ( } /> ); } 

Ved at sætte `startInLoadingState` til `true` og bruge `renderLoading`-prop'en, kan vi vise en standard `ActivityIndicator` eller en brugerdefineret komponent, mens indholdet indlæses.

Fejlhåndtering

Vi kan også håndtere fejl, der opstår under indlæsningen af WebView'en:

import { WebView } from "react-native-webview"; import { ActivityIndicator } from "react-native"; import React, { useState } from 'react'; // Antag at ErrorComponent er en brugerdefineret komponent const ErrorComponent = ({ errorMessage }) => ( Fejl: {errorMessage}); export default function HomeScreen() { const [error, setError] = useState(null); return ( <> {error ? (  ): (  setError(error)} startInLoadingState={true} renderLoading={() => } /> )} ); } 

Her bruger vi `onError`-prop'en til at fange fejl og vise en brugerdefineret fejlmeddelelse.

Integration med Next.js

At integrere en Next.js-side i en React Native WebView er en almindelig brugssituation, især når man skal vise komplekse, dynamiske former eller brugergrænseflader, der allerede er bygget med React.

Trin-for-trin integration

1. Opsæt React Native Projekt: Brug `npx react-native init MyApp` og installer `react-native-webview` med `npm install react-native-webview`.
2. Opret WebView Komponent: Lav en `WebviewScreen.tsx` komponent, der indkapsler `WebView` og håndterer props som `targetUrl` og `authToken`.
3. Opsæt Next.js Projekt: Brug `npx create-next-app my-nextjs` for at oprette dit Next.js-projekt.
4. Opret Next.js Side: Lav en side (f.eks. `pages/user/index.tsx`) der modtager data via props, potentielt håndterer authentication-tokens og kalder eksterne API'er. Brug `getServerSideProps` til at hente nødvendige data, herunder headers.
5. Start Next.js Server: Kør `npm run dev` i dit Next.js projekt for at gøre siden tilgængelig (f.eks. på `http://localhost:3000`).
6. Integrer i React Native App: Opdater din `App.tsx` i React Native-projektet til at importere og bruge `WebviewScreen` komponenten, hvor du sender den korrekte `targetUrl` (inklusive eventuelle query-parametre som `user_id`) og `authToken`.

Denne proces sikrer, at din Next.js-applikation kører i en sandkasse inden i din React Native-app, hvilket muliggør en glidende overgang mellem native og web-oplevelser.

Konklusion

`react-native-webview` er et utroligt alsidigt værktøj, der giver React Native-udviklere mulighed for at udnytte kraften i webteknologier direkte i deres mobile applikationer. Fra simpel indlejring af URL'er og inline HTML til kompleks kommunikation via JavaScript og håndtering af navigation, tilbyder pakken en robust løsning. Ved at mestre disse teknikker kan du skabe rigere og mere dynamiske brugeroplevelser, der kombinerer det bedste fra både native og web-verdenen.

Du kan finde kildekoden til eksemplerne på GitHub for yderligere udforskning.

Hvis du vil læse andre artikler, der ligner React Native WebView: Integrer Webindhold, kan du besøge kategorien Mobil.