ios – React Native WebView滚动行为无法按预期工作

我有一个本机应用程序使用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,scroll events 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.

ios – React Native WebView滚动行为无法按预期工作

解决方法

browser compatibility

相关文章