Android键盘在调整大小时消失答案

【问题标题】：Android keyboard disappears on resizeAndroid键盘在调整大小时消失
【发布时间】：2021-11-29 13:59:01
【问题描述】：

我是 Android 新手，因为我目前正在使用跨平台运行时 (Capacitor)，因此我们实际上有一个适用于三个平台（iOS、Web 和 Android）的代码库。

我遇到了一些问题，如果 manifest.xml 中的键盘输入样式设置为“adjustResize”而不是“adjustPan”，键盘会出现片刻，然后在我的 Webview 应用程序上消失，我已经做了一些测试，它似乎也导致了 webview 的完全刷新以调整大小以适应键盘，但这很快也迫使键盘关闭，有什么办法可以解决这个瓶颈？

我不能使用adjustpan，因为我有一些直接位于屏幕底部的组件，键盘会完全飞过我希望用户看到的重要内容，非常感谢任何帮助:)

【问题讨论】：

标签： android reactjs react-redux capacitor

【解决方案1】：

除了 iOS，当软键盘出现时，android 会发送 resize 事件。因此，只要您的 PWA（跨平台）具有基于 resize 事件的移动响应能力，它就会在出现 android 键盘时重新渲染。

让我在这里分享我解决此问题的方法。

在 AndroidManifest.xml 中，在activity 中添加adjustpan。

android:windowSoftInputMode="adjustPan"

然后，Android 键盘将始终出现，但会覆盖网页内容。现在，我们必须通过向上移动键盘高度来调整网页内容

在你的 PWA 中安装电容键盘包

npm install @capacitor/keyboard"

检测keyboardDidShow 事件并将内容向上移动为键盘高度。并且当键盘消失时，通过keyboardDidHide重置内容位置

import { Keyboard } from "@capacitor/keyboard";
const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {
  const getDeviceInfo = async () => {
    const info = await Device.getInfo();
    setDeviceInfo(info.platform);
  };
  getDeviceInfo();

  Keyboard.addListener("keyboardDidShow", info => {
    setTimeout(() => {
      setKeyboardHeight(info.keyboardHeight);
    }, 300);
  });

  Keyboard.addListener("keyboardDidHide", info => {
    setKeyboardHeight(0);
  });

并根据keyboardHeight调整网页内容位置

【讨论】：

谢谢@Sandokan