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

Question

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

ala*_*nan 7 scroll webview ios reactjs react-native

我有一个本机应用程序,它使用React Native WebView来包装网页.

      <WebView
        ref={webview => (this.webview = webview)}
        source={{
          uri: `http://localhost:8000`
        }}
      />

Run Code Online (Sandbox Code Playgroud)

在此示例中,页面只是指向具有以下代码的localhost实例,当用户滚动时,该代码会递增一个数字:

var i = 0;
var $el = document.getElementById('counter')

window.addEventListener('scroll', function(e) {
  e.preventDefault();
  i += 1;
  $el.innerText = i
});

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

React Native内部的滚动行为的行为WebView方式与浏览器不同.它会在触发scroll事件之前等待滚动完成.

这是行为的比较; 在浏览器中,滚动事件在滚动正在进行时触发,按照需要和预期进行:

在iOS 11中的React Native项目中,滚动事件在滚动完成后触发:

大概是出于性能原因而使用此行为,但它几乎杀死了我的应用程序的预期行为.

还有其他的工作我没想过吗？

如何确保滚动事件的行为与React Native应用程序中的浏览器相同？

Answer 1

ben*_*nel 2

我在MDN 滚动事件文档中找到了以下信息。我认为问题与反应本机无关。

浏览器兼容性

iOS UIWebView

在 iOS UIWebView 中，scroll滚动发生时不会触发事件；它们仅在滚动完成后才会被触发。请参阅 Bootstrap 问题 #16202。Safari 和 WKWebViews 不受此错误影响。

归档时间：	8 年，2 月前
查看次数：	3135 次
最近记录：	8 年，2 月前