💡
原文中文，约7600字，阅读约需19分钟。
📝
内容提要
本文介绍了在React Native中实现WebView编辑器的两个问题：工具栏与键盘的吸附以及键盘遮挡焦点元素的解决方案。通过使用React Native WebView和Bridge与Web Editor进行通信，实现了工具栏贴边和处理焦点元素被遮挡的问题。同时，还介绍了实现细节和代码示例。
🎯
关键要点
-
本文主要解决WebView编辑器中的两个问题：工具栏与键盘的吸附，以及焦点元素被虚拟键盘遮挡。
-
文章适用于React Native ~0.72版本。
-
使用Web + React Native WebView实现文本编辑器，布局包括编辑器和AccessoryView + Keyboard。
-
React Native的InputAccessoryView组件仅适用于TextInput，无法在WebView中使用。
-
Web中使用VisualViewport获取键盘高度，但不是实时状态。
-
通过Keyboard事件在React Native中获取键盘高度，并传递给Web以控制工具栏位置。
-
使用react-native-pell-rich-editor库，通过Bridge与Web Editor通信实现工具栏。
-
使用KeyboardAvoidingView来处理工具栏与键盘的吸附问题。
-
通过FlatList实现工具栏的点击事件，确保键盘不消失。
-
在Web和RN两侧声明接口以实现编辑器操作。
-
实现工具栏的动画衔接，当键盘消失时工具栏也要消失。
-
处理WebView中焦点元素被键盘遮挡的问题，计算焦点元素坐标与视窗高度。
-
通过监听窗口大小变化，调整滚动容器的位置以避免内容被遮挡。
🏷️
标签
➡️
