Componente WebView nativo de React

En este artículo, vamos a ver cómo crear un WebView en react-native . WebView se utiliza para mostrar contenido web en una aplicación. Para ello, vamos a utilizar WebView Component. 

Sintaxis: 

<WebView
    source={}
/>

Accesorios de WebView: 

• fuente: básicamente carga la URL en la vista web.
• automaticAdjustContentInsets: Controla la inserción de contenido para las vistas web. Su valor predeterminado es verdadero.
•  injectJavaScript: Inyecta JavaScript en la vista web.
• injectionJavaScript: también inyecta JavaScript en la vista web, pero se ejecuta inmediatamente cuando se carga la vista y solo se ejecuta una vez .
• mediaPlaybackRequiresUserAction: determina si el audio y el video HTML5 requieren que el usuario los toque antes de comenzar a reproducir. Por defecto, es cierto.
• nativeConfig: anula el componente nativo que se utiliza para representar la vista web.
• onError: es una función que se invoca cuando falla la carga de la vista web.  
• onLoad: Es una función que se invoca cuando se carga la vista web.
• onLoadEnd: es una función que se invoca cuando finaliza la carga de la vista web.
• onLoadStart: Es una función que se invoca cuando la vista web comienza a cargarse.
• onMessage: es una función que se invoca cuando WebView llama a ‘ window.postMessage ‘.
• onNavigationStateChange: Es una función que se invoca cuando comienza o finaliza la carga de WebView.
• originWhitelist: Es una lista de strings de origen para permitir la navegación. Las listas de origen predeterminadas son «http://*» y «https://*».
• renderError: Es una función que devuelve una vista para mostrar si hay un error.
• renderLoading: Es una función que devuelve un indicador de carga.
• scalesPageToFit: controla si el contenido se escala para ajustarse a la vista o no. Su valor predeterminado es verdadero.
• onShouldStartLoadWithRequest: Es una función que permite el manejo personalizado de cualquier solicitud de vista web.
• startInLoadingState: básicamente obliga a WebView a mostrar la vista de carga en la primera carga.
• decelerationRate: es un número de punto flotante que determina qué tan rápido se desacelera la vista de desplazamiento. También puede usar el atajo, es decir , normal y rápido .
• domStorageEnabled: Controla si el almacenamiento DOM está habilitado o no. Es solo para la plataforma Android.
• javaScriptEnabled: Controla si JavaScript está habilitado o no. Es solo para la plataforma android y por defecto su valor es verdadero.
• mixedContentMode: Básicamente especifica el modelo de contenido mixto. Sus valores posibles son nunca, siempre y compatibles.
• thirdPartyCookiesEnabled: Habilita las cookies de terceros si es cierto. Su valor predeterminado es verdadero.
• userAgent: establece el agente de usuario para la vista web.
• allowInlineMediaPlayback: determina si los videos HTML5 se reproducen en línea o usan el controlador nativo de pantalla completa. Su valor predeterminado es falso.
• rebotes: Determina si la vista web rebota cuando llega al borde del contenido. Su valor predeterminado es verdadero.
• contentInset: es la cantidad por la cual el contenido de la vista web se inserta desde los bordes de la vista de desplazamiento. 
• dataDetectorTypes: determina los tipos de datos convertidos en URL en las que se puede hacer clic en el contenido de la vista web. Sus valores posibles son número de teléfono, enlace, dirección, evento de calendario, ninguno y todos.
• scrollEnabled: Determina si el scroll está habilitado o no. Por defecto, es cierto.
• geolocalizaciónEnabled: Determina si la geolocalización se habilita o no en vista web. Por defecto, es falso.
• allowUniversalAccessFromFileURLs: determina si se debe permitir que JavaScript que se ejecuta en el contexto de una URL de esquema de archivo acceda al contenido desde cualquier origen. Su valor por defecto es falso.
• allowFileAccess: determina si la vista web tiene acceso a los archivos del sistema o no. Por defecto, es falso.
• useWebKit: es un accesorio en desuso. En su lugar, utilice el accesorio de origen.
• html: también es un accesorio en desuso. En su lugar, utilice el accesorio de origen.

Métodos en WebView: 

• goForward(): Te lleva una página hacia adelante en la vista web.
• goBack(): Te lleva una página atrás en la vista web.
• reload(): Recarga la página actual en la vista web.
• stopLoading() : deja de cargar en la vista web.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

• Paso 4: para WebView, tenemos el componente WebView en react-native que nos ayuda a mostrar el contenido web en una aplicación, pero ese componente ahora está obsoleto , por lo que en sustitución de esto vamos a utilizar un paquete externo llamado react-native- vista web. Instale ese paquete usando el siguiente comando.

  npm install react-native-webview

Estructura del proyecto : 

Ejemplo: Ahora implementemos el WebView. Aquí vamos a representar el sitio web GeeksforGeeks en nuestra vista web.

import React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
  
  return (
    <WebView source={{ uri: 'https://geeksforgeeks.org/' }} />
  );
}

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/0.61/webview