React Native如何实现键盘悬浮显示在所有视图顶部，不挤压页面？

核心原理说明 #

React Native 双端默认的键盘弹出行为都会触发布局重绘：Android 默认采用adjustResize模式修改Activity布局高度、iOS 配合KeyboardAvoidingView会自动添加底部padding，最终都会导致页面被向上挤压。系统原生键盘的渲染层级本身就远高于App内所有视图，不需要手动设置zIndex，只要禁用默认的布局调整逻辑即可实现悬浮效果。

具体实现步骤 #

• Android 端原生配置修改 #

  打开android/app/src/main/AndroidManifest.xml，找到MainActivity节点的android:windowSoftInputMode属性，修改为adjustNothing，修改后键盘弹出时不会调整Activity的布局尺寸，直接悬浮在原有布局上方。
  示例配置：

  <activity
    android:name=".MainActivity"
    android:windowSoftInputMode="adjustNothing"
    // 其余原有配置保持不变
  >
  

• iOS 端逻辑处理 #

  iOS 原生默认键盘就是悬浮渲染，不需要修改原生配置，直接移除代码中的KeyboardAvoidingView组件即可，该组件的自动避让逻辑会触发页面偏移，不符合悬浮需求。

• 可选：输入框自定义避让逻辑 #

  键盘悬浮后如果输入框位于页面下半部分，会被键盘本身遮挡，可通过监听键盘事件滚动页面露出输入框，不会挤压整体布局，示例代码如下：

  import { useState, useEffect } from 'react';
  import { Keyboard, ScrollView, TextInput, View } from 'react-native';
  
  export default function DemoPage() {
    const [keyboardHeight, setKeyboardHeight] = useState(0);
  
    useEffect(() => {
      const showSub = Keyboard.addListener('keyboardDidShow', (e) => {
        setKeyboardHeight(e.endCoordinates.height);
      });
      const hideSub = Keyboard.addListener('keyboardDidHide', () => {
        setKeyboardHeight(0);
      });
  
      return () => {
        showSub.remove();
        hideSub.remove();
      };
    }, []);
  
    return (
      <View style={{ flex: 1 }}>
        <ScrollView 
          style={{ flex: 1 }}
          contentContainerStyle={{ paddingBottom: keyboardHeight }}
        >
          {/* 此处放置原有页面内容，包括所有TextInput组件 */}
          <TextInput style={{ borderWidth: 1, marginTop: 600 }} placeholder="测试输入" />
        </ScrollView>
      </View>
    );
  }
  

自定义键盘适配方案 #

如果你的项目使用自定义键盘而非系统键盘，只需要给自定义键盘的容器添加如下样式即可实现悬浮效果：

const customKeyboardStyle = {
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  zIndex: 5000,
}

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