ios - onmessage - react native communicate with webview
El comportamiento de desplazamiento WebView nativo de React no funciona como se esperaba (2)
El problema se resolvió utilizando WKWebView en lugar de React Native WebView.
Tengo una aplicación nativa que usa React Native WebView para envolver una página web.
<WebView
ref={webview => (this.webview = webview)}
source={{
uri: `http://localhost:8000`
}}
/>
En este ejemplo, la página simplemente apunta a una instancia de localhost que tiene el siguiente código, que incrementa un número cuando el usuario se desplaza:
var i = 0;
var $el = document.getElementById(''counter'')
window.addEventListener(''scroll'', function(e) {
e.preventDefault();
i += 1;
$el.innerText = i
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height: 2000px; background: linear-gradient(dodgerblue, yellowgreen)">
<div id="type"></div>
<div id="counter" style="position: fixed">0</div>
</body>
</html>
El comportamiento de desplazamiento dentro de un React Native WebView comporta de una manera diferente al navegador. Espera a que el rollo termine antes de disparar un evento de scroll .
Aquí hay una comparación del comportamiento; en el navegador, el evento de desplazamiento se dispara mientras el desplazamiento está en progreso, según lo deseado y como se esperaba:
En un proyecto React Native en iOS 11, el evento de desplazamiento se dispara después de que el desplazamiento haya finalizado:
Este comportamiento se usa supuestamente por motivos de rendimiento, pero no hace más que acabar con el comportamiento previsto de mi aplicación.
¿Hay otro trabajo que no haya pensado?
¿Cómo puedo garantizar que el evento scroll se comporte de la misma manera que el navegador dentro de mi aplicación React Native?
Encontré la siguiente información en la documentación del evento de desplazamiento MDN . Creo que el problema no está relacionado con la reacción nativa.
Compatibilidad del navegador
iOS UIWebView
En iOS UIWebViews, los eventos de
scrollno se disparan mientras se realiza el desplazamiento; solo se disparan después de que el desplazamiento se haya completado. Ver Bootstrap issue # 16202 . Safari y WKWebViews no se ven afectados por este error.