Erstellen einer WebView-App in React Native mit Expo

Das Erstellen einer WebView-App in React Native mit Expo ist ein unkomplizierter Prozess. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie dies erreichen, einschließlich der Installation, der Einrichtung eines WebView und der Erstellung der App.

Mehr wissen:- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html

Voraussetzungen

• Grundkenntnisse in JavaScript und React
• Node.js und npm auf Ihrem System installiert
• Expo CLI global installiert (npm install -g expo-cli)
• Ein Expo-Konto

Schritt 1: Initialisieren Sie ein neues Expo-Projekt

Erstellen Sie zunächst ein neues Expo-Projekt mit der Expo-CLI.

npx create-expo-app WebViewApp --template blank
cd WebViewApp

Schritt 2: Installieren Sie React Native WebView

Installieren Sie das Paket „react-native-webview“, das die WebView-Komponente bereitstellt.

expo install react-native-webview

Schritt 3: Erstellen Sie die WebView-Komponente

Erstellen Sie eine neue Komponente zur Verarbeitung der WebView. Öffnen Sie App.js und ersetzen Sie den Inhalt durch den folgenden Code:

import React from 'react';
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: 'https://www.example.com' }}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator color='blue' size='large' />}
        style={{ marginTop: Platform.OS === 'ios' ? 20 : 0 }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Schritt 4: Passen Sie die WebView an

Sie können WebView weiter anpassen, um weitere Funktionen hinzuzufügen, z. B. die Handhabung von Navigationsgesten, die Anzeige eines Begrüßungsbildschirms oder die Handhabung von Dateidownloads.

Zeigt einen Begrüßungsbildschirm an

Um beim Laden von WebView einen Begrüßungsbildschirm anzuzeigen, installieren Sie das Expo Splash Screen-Paket.

expo install expo-splash-screen

Ändern Sie dann App.js, um den Begrüßungsbildschirm zu verwenden:

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!loading) {
      SplashScreen.hideAsync();
    }
  }, [loading]);

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: 'https://www.example.com' }}
        onLoadEnd={() => setLoading(false)}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator color='blue' size='large' />}
        style={{ marginTop: Platform.OS === 'ios' ? 20 : 0 }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Schritt 5: Erstellen Sie Ihre App und führen Sie sie aus

Um Ihre App auf einem physischen Gerät zu erstellen und auszuführen, verwenden Sie den folgenden Befehl:

expo start

Scannen Sie den QR-Code mit der Expo Go-App auf Ihrem Gerät, um Ihr WebView in Aktion zu sehen.

Zusätzliche Anpassungen

• Navigationsgesten: Aktivieren Sie iOS-Navigationsgesten mit „allowsBackForwardNavigationGestures={true}“ in der WebView-Komponente.
• Datei-Downloads: Behandeln Sie Datei-Downloads mit der onFileDownload-Requisite und verwenden Sie das expo-file-system und die expo-sharing-Pakete zum Speichern von Dateien.
• Externe Links: Öffnen Sie externe Links im Browser des Systems mit expo-web-browser.

Ressourcen

• Expo-Dokumentation【10†Quelle】
• React Native WebView-Dokumentation【9†Quelle】
• LogRocket-Leitfaden zu React Native WebView【8†Quelle】

Indem Sie diese Schritte befolgen, können Sie mit Expo eine voll funktionsfähige WebView-App in React Native erstellen, mit Funktionen zur Handhabung verschiedener webbezogener Funktionen und Anpassungen.

Das obige ist der detaillierte Inhalt vonErstellen einer WebView-App in React Native mit Expo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!