如何在React Native中覆盖键盘？

Question

是否有任何方法可以覆盖键盘上的顶层？我尝试了zIndex，模式，没有任何效果。为了更好地了解我们在说什么，请查看图片。

Answer 1

在构建聊天应用程序时，我也遇到了这个问题。我的解决方案可能不是最好的，但对我们来说已经足够了。我们希望在与键盘相同的帧中渲染图像选择器，基本上在拾取图像时“替换”它，然后在拾取图像后再次显示键盘。

首先，我们需要知道设备上键盘的高度。为此，我们等待第一个keyboardDidShow事件并在此之后存储键盘的高度。现在，当我们需要渲染图像选择器时，我们知道要赋予它什么高度。

要渲染图像选择器，我们执行Keyboard.dismiss，同时还将图像选择器的状态设置为rendered。这将导致外观不好的“斑点”，在该斑点中，当关闭键盘时，键盘上方的内容将向下移动，然后在渲染图像选择器后再次向上移动。我们通过将键盘上方“容器”的高度设置为恒定来解决此问题。然后，当关闭键盘时，键盘上方的内容不会向下移动，并且看起来平滑。您甚至可以为“模态”渲染添加动画效果。

从图像选择器回到键盘是相同的基本概念。隐藏选择器并显示键盘。为此，我们“聚焦”文本输入，它会自动显示键盘。

值得注意的是，iOS和Android对键盘事件的处理方式不同。 Android不支持willShow和willHide事件，并且在键盘显示时也将您的主要内容容器向上撞。 iOS将键盘显示在内容的顶部（z索引），因此您必须自己向上移动键盘。

如果这是您要寻找的答案，我可以发布一些示例代码。实际上，它并没有它听起来那么复杂，您只需要在使用它之前就可以使用它。