Question

我有一个使用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应用内的浏览器相同？

Answer 1

我在MDN scroll event documentation找到了以下信息。我认为问题与本地反应无关。

浏览器兼容性

iOS UIWebView

在iOS UIWebViews中，滚动发生时不会触发scroll个事件;他们只是在被解雇之后   滚动已完成。 See Bootstrap issue #16202。 Safari和   WKWebViews不受此错误的影响。

Answer 2

使用Scroll entire list View horizontally而不是React Native WebView解决了问题。

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

2 个答案:

浏览器兼容性