需求

在WebView中監(jiān)聽到滾動的方向，然后根據(jù)方向進行原生UI的隱藏/顯示。
比如，向下滾動的時候，隱藏導(dǎo)航欄，向上則顯示。

注入腳本

所以我們計劃采用injectedJavaScript屬性來向頁面注入一個腳本，監(jiān)聽頁面滾動后，使用postMessage向RN客戶端發(fā)送一個數(shù)據(jù)進行通信。

所以注入腳本這么寫：

(function(){
var callback=function(status){
window.postMessage('scroll:' +status);
}
var a=document.body.scrollTop;
window.addEventListener('scroll',function(){
  var b=document.body.scrollTop;
  var c=b-a;
  if (c===0)return;
  callback(c>0?'d':'u')
  a=b;
}, false);
})(window);

給壓縮成了一行（避免Android下不執(zhí)行）：

(function(){var callback=function(status){window.postMessage('scroll:'+status)};var a=document.body.scrollTop;window.addEventListener('scroll',function(){var b=document.body.scrollTop;var c=b-a;if(c===0)return;callback(c>0?'d':'u');a=b},false)})(window);

監(jiān)聽腳本

既然已經(jīng)注入了一個發(fā)送數(shù)據(jù)的腳本，我們就在RN端進行監(jiān)聽判斷吧！

很簡單，WebView設(shè)置onMessage事件即可：

          onMessage={e => {
            const { data } = e.nativeEvent;
            if (data === 'scroll:d') {
              this.toolBar.hide();
            } else if (data === 'scroll:u') {
              this.toolBar.show(this.webView)
            }
          }}