Création d'une application WebView dans React Native à l'aide d'Expo

Créer une application WebView dans React Native à l'aide d'Expo est un processus simple. Vous trouverez ci-dessous un guide étape par étape expliquant comment y parvenir, y compris l'installation, la configuration d'une WebView et la création de l'application.

En savoir plus :- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html

Conditions préalables

• Connaissance de base de JavaScript et React
• Node.js et npm installés sur votre système
• Expo CLI installé globalement (npm install -g expo-cli)
• Un compte Expo

Étape 1 : initialiser un nouveau projet d'exposition

Tout d'abord, créez un nouveau projet Expo à l'aide de l'Expo CLI.

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

Étape 2 : Installer React Native WebView

Installez le package React-native-webview, qui fournit le composant WebView.

expo install react-native-webview

Étape 3 : Créer le composant WebView

Créez un nouveau composant pour gérer le WebView. Ouvrez App.js et remplacez son contenu par le code suivant :

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;

Étape 4 : Personnaliser la WebView

Vous pouvez personnaliser davantage WebView pour ajouter plus de fonctionnalités, telles que la gestion des gestes de navigation, l'affichage d'un écran de démarrage ou la gestion des téléchargements de fichiers.

Afficher un écran de démarrage

Pour afficher un écran de démarrage pendant le chargement de WebView, installez le package Expo Splash Screen.

expo install expo-splash-screen

Ensuite, modifiez App.js pour utiliser l'écran de démarrage :

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;

Étape 5 : Créez et exécutez votre application

Pour créer et exécuter votre application sur un appareil physique, utilisez la commande suivante :

expo start

Scannez le code QR avec l'application Expo Go sur votre appareil pour voir votre WebView en action.

Personnalisations supplémentaires

• Gestes de navigation : activez les gestes de navigation iOS avec makesBackForwardNavigationGestures={true} dans le composant WebView.
• Téléchargements de fichiers : gérez les téléchargements de fichiers avec la prop onFileDownload et utilisez les packages expo-file-system et expo-sharing pour enregistrer les fichiers.
• Liens externes : ouvrez les liens externes dans le navigateur du système à l'aide du navigateur expo-web.

Ressources

• Documentation de l'exposition【10†source】
• Documentation React Native WebView【9†source】
• Guide LogRocket sur React Native WebView【8†source】

En suivant ces étapes, vous pouvez créer une application WebView entièrement fonctionnelle dans React Native à l'aide d'Expo, avec des capacités permettant de gérer diverses fonctionnalités et personnalisations liées au Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!