native组件覆盖在webview上,如何实现平滑滚动?
发布于 6 年前 作者 jingmeng 5818 次浏览 来自 官方Issues

简单实现了下,在webview中添加了定时器监听:

setInterval(this.judgeBoundingRect, 1)

judgeBoundingRect = () => {
    if(!this.mapDiv.current)return;
    const {id} = this.props
    const newBoundingRect = this.mapDiv.current.getBoundingClientRect()
    if(this.boundingRect){
      const {left, top, width, height} = newBoundingRect
      const {left: oldLeft, top: oldTop, width: oldWidth, height: oldHeight} = this.boundingRect
      if(left !== oldLeft || top !== oldTop || width !== oldWidth || height !== oldHeight){//判断位置和大小是否发生了变化
        SparkJSBridgeTemp.invoke(ViewEventNames.UPDATE_NATIVE_VIEW_BOUND_RECT, {data: {
          data: {
            boundingRect: newBoundingRect,
            id: id
          }
        }}, null)
      }
    }
    this.boundingRect = newBoundingRect
  }

android里直接更新

private void updateNativeViewBoundRectByJsonObj(String id, JSONObject boundingrect){
    int width = DensityUtil.dip2px(getContext(), (float) boundingrect.optDouble("width"));
    int height = DensityUtil.dip2px(getContext(), (float)boundingrect.optDouble("height"));
    int left = DensityUtil.dip2px(getContext(), (float)boundingrect.optDouble("left"));
    int top = DensityUtil.dip2px(getContext(), (float)boundingrect.optDouble("top"));
    View view = mNativeViews.get(id);
    FrameLayout.LayoutParams lp;
    if(view.getLayoutParams() != null){
        lp = (FrameLayout.LayoutParams) view.getLayoutParams();
    }else {
        lp = new FrameLayout.LayoutParams(width, height);
    }
    lp.leftMargin = left; lp.topMargin = top; lp.width = width; lp.height = height;
    view.setLayoutParams(lp);
}

更新效果可以实现,但是会略有延迟。不知道如何解决。。。

大家一起来讨论下吧,谢谢!

回到顶部