我有一个本机应用程序使用React Native
WebView来包装网页.
<WebView
ref={webview => (this.webview = webview)}
source={{
uri: `http://localhost:8000`
}}
/>
在此示例中,页面只是指向具有以下代码的localhost实例,该代码在用户滚动时递增数字：
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>
React Native WebView内部的滚动行为的行为方式与浏览器不同.它会在触发滚动事件之前等待滚动完成.
这是行为的比较;在浏览器中,滚动事件在滚动过程中触发,按照需要和预期方式触发：
在iOS 11中的React Native项目中,滚动事件在滚动完成后触发：
这种行为大概是出于性能原因而使用,但它几乎杀死了我的应用程序的预期行为.
还有其他的工作我没想过吗？
如何确保滚动事件的行为与React Native应用程序中的浏览器相同？
解决方法
我在
MDN scroll event documentation上找到了以下信息.我认为问题与react-native无关.
browser compatibility
iOS UIWebView
In iOS UIWebViews,
scrollevents are not fired while scrolling is taking place; they are only fired after the scrolling has completed. 07001. Safari and WKWebViews are not affected by this bug.