React Native监听键盘事件报错：undefined is not an object (evaluating 'config.onComplete')

报错原因分析 #

这个报错通常由两种情况导致：

• 未正确定义keyboardWillShow回调函数，传入了undefined作为监听回调
• 在Android平台上使用了iOS专属的键盘事件（keyboardWillShow/keyboardWillHide仅支持iOS，Android无此类事件）

解决方案 #

1. 确保回调函数已正确定义 #

先检查你是否实现了对应的事件处理函数，示例：

const keyboardWillShow = () => {
  // 键盘即将显示时的操作，比如调整视图位置
  console.log("键盘即将显示");
};

const keyboardWillHide = () => {
  // 键盘即将隐藏时的操作
  console.log("键盘即将隐藏");
};

2. 处理平台兼容性问题 #

keyboardWillShow/keyboardWillHide是iOS专属事件，Android仅支持keyboardDidShow/keyboardDidHide。通过Platform模块区分平台添加对应监听器：

完整示例代码（函数组件） #

import { Keyboard, Platform, useEffect } from 'react-native';

function YourComponent() {
  // iOS专属回调
  const keyboardWillShow = () => {
    console.log("键盘即将显示（iOS）");
    // 执行你的业务操作
  };

  const keyboardWillHide = () => {
    console.log("键盘即将隐藏（iOS）");
    // 执行你的业务操作
  };

  // Android专属回调
  const keyboardDidShow = () => {
    console.log("键盘已显示（Android）");
    // 执行你的业务操作
  };

  const keyboardDidHide = () => {
    console.log("键盘已隐藏（Android）");
    // 执行你的业务操作
  };

  useEffect(() => {
    let showListener, hideListener;

    // 根据平台选择对应事件
    if (Platform.OS === 'ios') {
      showListener = Keyboard.addListener('keyboardWillShow', keyboardWillShow);
      hideListener = Keyboard.addListener('keyboardWillHide', keyboardWillHide);
    } else {
      showListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
      hideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
    }

    // 组件卸载时移除监听器，避免内存泄漏
    return () => {
      showListener?.remove();
      hideListener?.remove();
    };
  }, []);

  return (
    // 你的组件渲染内容
  );
}

3. 额外注意事项 #

• 确保React Native版本在0.60以上，API兼容性更好
• 务必在组件卸载时移除监听器，否则可能导致内存泄漏和异常行为

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