在Croll侦听器上响应本机webview

我一直在检查react原生文档，但似乎没有任何用于WebView组件的onScroll侦听器。有办法解决这个问题吗？其思想是在webview滚动时隐藏UI组件，并在用户停止滚动或向下滚动时显示它们

我自己没有这样做，但是在查看文档时，WebView有一个

onMessage

道具，它具有一个函数。WebView使用

window.postMessage

调用此函数

我相信这是将信息从网络视图传递回父应用程序的推荐方式。

更新：

对于

react native WebView

中的

WebView

，应使用

window.react nativewebview.postMessage

而不是

window.postMessage

。有关详细信息，请参阅

旧答案：

使用injectedJavaScript：

(function(){
    var callback=function(direction){
        window.postMessage('scroll-'+ direction)}; // here you can also use json string
        var initTop=document.body.scrollTop;
        window.addEventListener('scroll',function(){
            var currTop = document.body.scrollTop;
            var dist = currTop-initTop;
            if(dist === 0)
                return;
            callback(dist>0 ? 'down' : 'up');
            initTop = currTop;
        },false)
})(window);

将上述脚本包装成字符串

jsStr

，然后：

<WebView
    source={{uri: YOUR_URL }}
    injectedJavaScript={jsStr}
    onMessage={(event) => {
        console.log('scroll message', event.nativeEvent.data)
        // then do something with the scroll message
    }} />

{
console.log（'scroll message'，event.nativeEvent.data）
//然后对滚动消息进行处理
}} />