React移动端监听IOS/安卓键盘弹出事件处理

export const monitorSoftKeyboard = (callback: any) => {
  // Android系统
  const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
  window.addEventListener('resize', () => {
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (resizeHeight - 0 < originalHeight - 0) {
      //当软键盘弹起，在此处操作
      callback(true);
    } else {
      //当软键盘收起，在此处操作
      callback(false);
    }
  });
 // ios
  window.addEventListener('focusin', () => {  //软键盘弹起事件
    callback(true);
  })
  window.addEventListener('focusout', () => { //软键盘关闭事件
    callback(false);
  })
};
// 页面引用
import { monitorSoftKeyboard } from "~/utils/monitorSoftKeyboard";
// 使用
const [hideBottom, setHideBottom] = useState<boolean>(false)
useEffect(() => {
    monitorSoftKeyboard((isUp: any) => { // 监控键盘弹出
      if (isUp) {
        setHideBottom(true);
      } else {
        setHideBottom(false);
      }
    });
 }, []);
// 根据hideBottom来进行页面的逻辑处理