我有一个使用 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 中的滚动行为与浏览器不同。它在触发 scroll 事件之前等待滚动完成。
这是行为的比较；在浏览器中，滚动事件会在滚动过程中触发，如预期的那样:
在 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. See Bootstrap issue #16202. Safari and WKWebViews are not affected by this bug.
关于ios - React Native WebView 滚动行为无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46541744/