Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Comunicar una Web en React con un WebView de React Native usando postMessage()

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos comunicar un Web creada con React con un WebView en React Native y además utilizaremos la función postMessage() de JavaScript. Esto es muy útil para poder realizar interfaces con web y poderlas implementar dentro de una APP.

React Native

Utilizaremos la librería react-native-webview

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm i react-native-webview --save
npm i react-native-webview --save
npm i react-native-webview --save

La importamos:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { WebView } from 'react-native-webview';
import { WebView } from 'react-native-webview';
import { WebView } from 'react-native-webview';

Lo primero que tenemos que hacer es crear un WebView dónde cargaremos la URL que queremos manejar.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<WebView
onMessage={onMessage} mixedContentMode="compatibility"
source={{ uri: urlCargar }} />
<WebView onMessage={onMessage} mixedContentMode="compatibility" source={{ uri: urlCargar }} />
 <WebView 
                        onMessage={onMessage} mixedContentMode="compatibility"
                        source={{ uri: urlCargar }} />

En urlCargar pondremos nuestra web a cargar.

Y para obtener el onMessage crearemos esta función:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function onMessage(data) {
if (data != null && data.nativeEvent != null && data.nativeEvent.data != null) {
//Si no es JSON (recibimos un texto plano):
//alert(datosDevueltos);
//Si se recibe un objeto JSON:
var datosDevueltos = JSON.parse(data.nativeEvent.data);
alert(JSON.stringify(datosDevueltos));
}
}
function onMessage(data) { if (data != null && data.nativeEvent != null && data.nativeEvent.data != null) { //Si no es JSON (recibimos un texto plano): //alert(datosDevueltos); //Si se recibe un objeto JSON: var datosDevueltos = JSON.parse(data.nativeEvent.data); alert(JSON.stringify(datosDevueltos)); } }
function onMessage(data) {
    if (data != null && data.nativeEvent != null && data.nativeEvent.data != null) {
        //Si no es JSON (recibimos un texto plano):
        //alert(datosDevueltos);

        //Si se recibe un objeto JSON:
        var datosDevueltos = JSON.parse(data.nativeEvent.data);
        alert(JSON.stringify(datosDevueltos));
    }
}

Ahora ya tenemos preparada la parte de React Native dónde vamos a recibir el dato.

React

En React vamos a crear una web por ejemplo test.tsx

Primero tenemos que definir un nuevo tipo para Window (que nos pide React Native WebView)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
declare global {
interface Window {
ReactNativeWebView: any;
}
}
declare global { interface Window { ReactNativeWebView: any; } }
declare global {
  interface Window { 
    ReactNativeWebView: any; 
  }
}

Y ahora simplemente dónde queramos comunicar el evento podremos:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
window.ReactNativeWebView.postMessage("Hola");
window.ReactNativeWebView.postMessage("Hola");
window.ReactNativeWebView.postMessage("Hola");

o Incluso podemos enviar objetos JSON:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
window.ReactNativeWebView.postMessage(JSON.stringify(objEnviar));
window.ReactNativeWebView.postMessage(JSON.stringify(objEnviar));
window.ReactNativeWebView.postMessage(JSON.stringify(objEnviar));

0

Deja un comentario