别着急,坐和放宽
文章主要解决两个问题:1. WebView 编辑器工具栏吸附键盘的实现。2. 焦点元素被虚拟键盘遮挡的问题。
首先介绍了在 React Native ~0.72 使用 WebView 嵌入 Web 编辑器时,如何处理 AccessoryView 以及工具栏贴合键盘。原生 InputAccessoryView 仅适用于 TextInput,WebView 中无法直接用。尝试了用 Web 的 VisualViewport 监听键盘、高度信息,但实时性和动画衔接有弊端。
最后采用 react-native-pell-rich-editor 的思路,使用 RN 绘制 Toolbar,并用 KeyboardAvoidingView 实现工具栏与键盘跟随,并通过桥接与 Web 通信。键盘消失时用动画让工具栏也跟随消失。
焦点遮挡问题则通过检测当前焦点元素位置,计算滚动差距,自动滚动解决底部内容被虚拟键盘遮挡。