Question

我一直在查看react-native文档，但似乎并不是WebView组件的任何onScroll侦听器。这有解决方法吗？这个想法是在webview滚动时隐藏UI组件，并在用户停止滚动或向下滚动时显示它们。

Answer 1

更新：

对于WebView中的react-native-webview，应使用window.ReactNativeWebView.postMessage而不是window.postMessage。有关详细信息，请参见react-native-webvie#communicating-between-js-and-native。

旧答案：

使用jectedJavaScript：

(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
    }} />

Answer 2

我自己并没有这样做，但审查文档，WebView有一个onMessage道具，它具有一个功能。 WebView使用window.postMessage调用此函数。

我相信这是将信息从WebView传递回父应用程序的推荐方法。

React-Native webview onScroll Listener

2 个答案: