如何在键盘弹出时隐藏组件？有无无需安装包的实现方案？

Hey there! Let's tackle your questions about hiding components when the keyboard pops up, step by step:

1. 如何实现键盘弹出时隐藏组件？ #

核心思路其实很简单：监听键盘的显示/隐藏事件，在事件触发时切换目标组件的显示状态。具体实现会根据你开发的平台（Web、移动端原生、跨端框架）有所不同，这里给几个常见场景的实用例子：

Web 端 #

• 监听输入框焦点事件：如果只有单个输入框，这是最直接的方式，不用复杂的判断：

const inputField = document.getElementById('main-input');
const componentToHide = document.getElementById('footer-bar');

inputField.addEventListener('focus', () => {
  componentToHide.style.display = 'none';
});

inputField.addEventListener('blur', () => {
  componentToHide.style.display = 'flex';
});

• 监听窗口高度变化：适合多个输入框的场景，通过视口高度的明显变化判断键盘是否弹出：

let initialViewportHeight = window.innerHeight;

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  // 设定一个阈值，比如高度差超过200px就判定为键盘弹出
  const isKeyboardActive = initialViewportHeight - currentHeight > 200;
  const targetComponent = document.getElementById('target-component');
  
  targetComponent.style.display = isKeyboardActive ? 'none' : 'block';
});

React Native 端 #

如果用跨端框架，官方提供的 Keyboard API 就能轻松实现；如果想更省心，也可以用第三方库（比如react-native-keyboard-aware-scroll-view），不过后者本质也是封装了原生键盘事件。这里先看基础实现：

import { Keyboard, View, TextInput } from 'react-native';
import { useState, useEffect } from 'react';

export default function Screen() {
  const [keyboardIsOpen, setKeyboardIsOpen] = useState(false);

  useEffect(() => {
    // 订阅键盘显示事件
    const showListener = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardIsOpen(true);
    });
    // 订阅键盘隐藏事件
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardIsOpen(false);
    });

    // 组件卸载时移除监听
    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* 只有键盘关闭时才显示目标组件 */}
      {!keyboardIsOpen && <View style={{ height: 60, backgroundColor: '#eee' }}>我是要隐藏的组件</View>}
      <TextInput style={{ borderWidth: 1, padding: 10 }} placeholder="点击唤起键盘" />
    </View>
  );
}

2. 除安装第三方包外，是否存在键盘显示时隐藏组件的方法？ #

绝对有！而且大多是各平台的原生/官方内置API，完全不需要依赖第三方库，上面的例子其实已经覆盖了一部分，再整理下不同场景的纯原生方案：

Web 端 #

直接用原生JS监听输入框的focus/blur事件，或者窗口resize事件，就像第一个问题里的Web示例，完全零依赖。

iOS 原生（Swift） #

通过系统通知中心监听键盘的显示/隐藏通知，这是iOS官方推荐的方式：

import UIKit

class MainViewController: UIViewController {
    @IBOutlet weak var bannerView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 注册键盘显示通知
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(onKeyboardWillShow),
            name: UIResponder.keyboardWillShowNotification,
            object: nil
        )
        // 注册键盘隐藏通知
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(onKeyboardWillHide),
            name: UIResponder.keyboardWillHideNotification,
            object: nil
        )
    }
    
    @objc private func onKeyboardWillShow(_ notification: NSNotification) {
        bannerView.isHidden = true
    }
    
    @objc private func onKeyboardWillHide(_ notification: NSNotification) {
        bannerView.isHidden = false
    }
    
    // 记得在销毁时移除通知监听，避免内存泄漏
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

Android 原生（Kotlin） #

可以通过两种方式实现：

1. 监听布局全局变化：通过ViewTreeObserver判断屏幕可用区域的变化，精准识别键盘状态：

import android.graphics.Rect
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var targetView: View
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        targetView = findViewById(R.id.target_view)
        
        val rootView = findViewById<View>(android.R.id.content)
        rootView.viewTreeObserver.addOnGlobalLayoutListener {
            val visibleFrame = Rect()
            rootView.getWindowVisibleDisplayFrame(visibleFrame)
            val screenHeight = rootView.rootView.height
            val keyboardHeight = screenHeight - visibleFrame.bottom
            
            // 当键盘高度超过屏幕1/5时，判定为弹出状态
            val isKeyboardOpen = keyboardHeight > screenHeight * 0.2
            targetView.visibility = if (isKeyboardOpen) View.GONE else View.VISIBLE
        }
    }
}

2. 重写配置变化方法：在AndroidManifest.xml里给Activity添加android:configChanges="keyboardHidden|orientation|screenSize"后，就可以通过onConfigurationChanged监听键盘状态：

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    if (newConfig.keyboardHidden == Configuration.KEYBOARDHIDDEN_NO) {
        targetView.visibility = View.GONE
    } else {
        targetView.visibility = View.VISIBLE
    }
}

React Native 端 #

直接用官方的Keyboard API，就像第一个问题里的React Native示例，完全不需要第三方包，就能实现监听键盘事件并控制组件显示。

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