React Native中检测键盘是否弹出的更简洁实现方案问询

你可以通过合并监听逻辑、简化代码结构的方式，在保持原有功能的前提下让实现更紧凑：

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

useEffect(() => {
  const listeners = [
    Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true)),
    Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false))
  ];
  return () => listeners.forEach(listener => listener.remove());
}, []);

优化说明： #

• 用数组统一存储监听器实例，清理时通过forEach批量移除，避免重复的移除代码
• 保留了原有的跨平台兼容性，Android和iOS均支持keyboardDidShow/keyboardDidHide事件
• 代码结构更紧凑，同时可读性不受影响

如果想进一步精简，还可以提取通用的状态更新逻辑，让代码更简洁：

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

useEffect(() => {
  const updateKeyboardState = (visible) => setKeyboardVisible(visible);
  const listeners = [
    Keyboard.addListener('keyboardDidShow', () => updateKeyboardState(true)),
    Keyboard.addListener('keyboardDidHide', () => updateKeyboardState(false))
  ];
  return () => listeners.forEach(l => l.remove());
}, []);

这两种写法都能实现和你原有代码完全一致的功能，同时大幅缩短了代码长度。

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