Android 键盘在调整大小时消失

Question

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

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

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

Answer 1

除了iOS，android在出现软键盘时发送resize事件。因此，只要您的 PWA（跨平台）具有基于调整大小事件的移动响应能力，它就会在 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调整网页内容位置

Android 键盘在调整大小时消失

Android keyboard disappears on resize

android

reactjs

react-redux

capacitor