目的:
使用原生组件时,解决以下三个问题:
- web 组件无法覆盖原生组件
- 原生组件不支持部分 css 属性
- 原生组件不跟随 web 容器滚动
原理:
创建一个 DOM 节点,设置它的 css 属性 overflow: scroll,此时原生侧的 WKWebview 会为这个 DOM 组件生成一个 WKChildScrollView。把这个 WKChildScrollView 挂载到 webview 容器中,并处理点击事件
挂载:就是用
addSubview函数把WKChildScrollView添加给 Webview 容器
为了解决这个问题,你们还做过哪些尝试?
- cover-view:只针对层级问题,在原生渲染层增加对应的原生组件,根据「后添加的 View 会覆盖前 View」,实现覆盖原生组件。局限性是
- 挖洞:也只解决了层级问题,把 webview 设置为顶级,然后再原生组件对应的地方渲染成空白,露出底层的原生组件