React Native WebView – Chargement de HTML dans React Native


Dans React Native, les WebViews permettent d’accéder à n’importe quel portail Web dans l’application mobile elle-même. En d’autres termes, une vue Web nous permet d’ouvrir les URL Web à l’intérieur de l’interface de l’application. Alors que React Native nous fournit un composant de vue Web intégré, mais nous allons utiliser réagir-native-webview plugin dans ce tutoriel, car il est plus puissant. React Native WebView est une WebView moderne, bien prise en charge et multiplateforme pour React Native.

La vue Web intégrée de React Native doit être dépréciée très bientôt en fonction de ce document. Par conséquent, ce plugin sert de remplacement à la vue Web intégrée. Ce plugin est un plugin tiers supporté par la communauté react-native.

Exigences

Les exigences pour suivre ce didacticiel sont les suivantes:

Premiers pas avec React Native WebView

Afin de commencer avec la configuration de la vue Web, nous devons d’abord installer le plugin réel. Ici, nous utilisons Yarn pour installer le plugin mais nous pouvons également utiliser NPM (Node Package Manager). Par conséquent, afin d’installer le plugin, nous devons exécuter la commande suivante dans l’invite de commande de notre dossier de projet:

  1. fil ajouter react-native-webview

Si la version native de react est supérieure ou égale à 0,60, l’installation prend également en charge la liaison automatique du plugin aux configurations natives. Mais, dans le cas des versions antérieures, nous devrons peut-être exécuter:

  1. lien react-native react-native-webview

iOS

Dans le cas d’iOS, nous devons également exécuter la commande suivante:

  1. installation de pod

Android

Dans le cas d’Android, ce module ne nécessite aucune étape supplémentaire après l’exécution de la commande de lien. Mais pour la version react-native-webview> = 6.X.X, nous devons nous assurer qu’AndroidX est activé dans notre projet. Cela peut être fait en modifiant android/gradle.properties et en ajoutant les lignes suivantes:

  1. android.useAndroidX = true
  2. android.enableJetifier = true

Ceci termine nos étapes d’installation. Nous pouvons maintenant utiliser le plugin dans notre projet natif React.

Chargement de code HTML en ligne à l’aide de React Native WebView

Tout d’abord, nous allons charger un simple contenu HTML dans notre interface d’application. Pour cela, nous devons ajouter les importations suivantes dans notre App.js fichier:

Ici, nous avons importé le WebView composant du réagir-native-webview brancher. Maintenant, nous pouvons utiliser ce composant afin de charger le contenu HTML comme indiqué dans l’extrait de code ci-dessous:

Ici, nous avons défini le MyInlineWeb composant de classe. Ce composant de classe a un render() fonction qui rend la WebView composant. le WebView le composant a le contenu HTML configuré à sa source soutenir. En conséquence, nous pouvons voir que le contenu HTML est rendu dans l’interface de l’application, comme indiqué dans la capture d’écran de l’émulateur ci-dessous:

Chargement de l’URL distante

Maintenant, au lieu d’un simple contenu HTML, nous allons charger l’intégralité du contenu du site Web à partir de l’URL distante. Pour cela, nous devons fournir uri option à la source accessoire de WebView comme indiqué dans l’extrait de code ci-dessous:

Par conséquent, nous obtiendrons la page Web entière du site Web ouverte dans la vue Web de l’application elle-même, comme indiqué dans la capture d’écran ci-dessous:

Ajout d’un spinner de chargement pour React Native Webview

Lors de l’accès à l’URL à partir du WebView , le chargement du contenu HTML entier sur le site Web peut prendre un certain temps. Ainsi, afin de représenter le retard, nous allons afficher un indicateur de chargement jusqu’à ce que le site Web se charge. Pour cela, nous devons importer le ActivityIndicator composant du package react-native comme indiqué dans l’extrait de code ci-dessous:

Maintenant, nous devons utiliser le ActiviIndicator composante de notre projet. Pour cela, nous allons créer une fonction appelée LoadingIndicatorView() qui renverra le ActivityIndicator comme indiqué dans l’extrait de code ci-dessous:

Ici, nous avons utilisé le AcitivityIndicator avec color et size accessoires. Ensuite, nous avons invoqué le LoadingIndicatorView fonctionner sur le renderLoading accessoire du WebView composant. Cela nous permet d’afficher l’indicateur de chargement jusqu’à ce que le site Web se charge complètement. On peut voir ça startInLoadingState prop est également utilisé ici. Cette valeur booléenne force le WebView pour afficher la vue de chargement sur la première charge. Cet accessoire doit être défini sur true pour que le renderLoading accessoire pour travailler.
En conséquence, nous obtenons le résultat suivant dans notre simulation d’émulateur:

Conclusion

Dans ce didacticiel, nous avons découvert la propriété d’affichage Web de React Native. Étant donné que la fonctionnalité d’affichage Web intégrée de React Native doit être déconseillée, nous avons appris à utiliser le plug-in d’affichage Web tiers nommé réagir-native-webview. Tout d’abord, nous avons appris à rendre le contenu HTML simple à l’aide du composant WebView. Ensuite, nous avons obtenu une explication détaillée de la façon d’utiliser le composant WebView et ses accessoires pour restituer l’intégralité du contenu HTML à partir de l’URL avec l’indicateur de chargement. Si vous souhaitez en savoir plus, vous pouvez accéder au référentiel principal pour une discussion concernant ce plugin d’affichage Web.

Close Menu