React-Native webview onScroll Listener答案

【问题标题】：React-Native webview onScroll ListenerReact-Native webview onScroll Listener
【发布时间】：2017-05-02 09:53:59
【问题描述】：

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

【问题讨论】：

标签： webview react-native listener

【解决方案1】：

更新：

对于来自react-native-webview 的WebView，应使用window.ReactNativeWebView.postMessage 而不是window.postMessage。详情请见react-native-webvie#communicating-between-js-and-native。

旧答案：

使用注入的JavaScript：

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

【讨论】：

【解决方案2】：

我自己没有这样做，但查看文档，WebView 有一个 onMessage 支持函数。 WebView 使用window.postMessage 调用此函数。

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

【讨论】：