@ionic/react搭配Capacitor时IonInput唤起设备键盘导致应用崩溃如何解决

该错误是Capacitor Keyboard插件的历史已知Bug，触发逻辑为：IonModal挂载/销毁过程中，键盘插件的全局布局监听器没有和组件生命周期同步，当输入框触发键盘弹出事件时，调用的KeyboardEventListener实例已经被释放为空，就会抛出空指针异常导致应用闪退。
版本不匹配是高发场景：尤其是Capacitor 3.x、4.x的早期版本，和Ionic 6.x搭配使用时极易触发该问题。

• 优先升级依赖：将@capacitor/keyboard、@capacitor/core、@ionic/react都升级到最新稳定版，官方已经在后续版本修复了该空指针问题，绝大多数场景升级后即可解决。
• 为IonModal添加keepContentsMounted={true}属性：该属性会让模态框内容在关闭后不会被卸载，避免监听器重复注册/销毁导致的空引用问题，修改后的代码如下：

<IonModal
    isOpen={showModal}
    cssClass="my-custom-class"
    keepContentsMounted={true}
    onDidDismiss={() => setShowModal(false)}
>
      <View note={something}/>
</IonModal>

• 延迟渲染模态框内的输入组件：在模态框完全挂载完成后再渲染带输入框的内容，避免在模态框渲染过程中触发键盘事件，示例代码如下：

import { useState } from 'react';

const YourComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const [modalReady, setModalReady] = useState(false);

  const handleModalPresent = () => {
    setModalReady(true);
  };

  const handleModalDismiss = () => {
    setShowModal(false);
    setModalReady(false);
  };

  return (
    <IonModal
        isOpen={showModal}
        cssClass="my-custom-class"
        onDidPresent={handleModalPresent}
        onDidDismiss={handleModalDismiss}
    >
          {modalReady && <View note={something}/>}
    </IonModal>
  )
}

• 调整键盘插件配置：如果暂时无法升级依赖，可以修改capacitor.config.ts的键盘配置规避问题：

// capacitor.config.ts
const config = {
  plugins: {
    Keyboard: {
      resize: 'ionic',
      resizeOnFullScreen: false
    }
  }
};
export default config;

内容的提问来源于stack exchange，提问作者xzegga