需求

在WebView中监听到滚动的方向，然后根据方向进行原生UI的隐藏/显示。
比如，向下滚动的时候，隐藏导航栏，向上则显示。

注入脚本

所以我们计划采用injectedJavaScript属性来向页面注入一个脚本，监听页面滚动后，使用postMessage向RN客户端发送一个数据进行通信。

所以注入脚本这么写：

(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下不执行）：

(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);

监听脚本

既然已经注入了一个发送数据的脚本，我们就在RN端进行监听判断吧！

很简单，WebView设置onMessage事件即可：

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