React Native应用软键盘弹出时上推挤压所有内容的问题如何解决？

方案1：使用自带Keyboard API自定义控制输入框偏移 #

核心逻辑是禁用系统默认的全局布局调整，仅在输入框被键盘遮挡时微调输入框位置，其余页面内容保持固定，自然实现键盘覆盖底部非交互区域。

• 引入React Native内置的Keyboard模块监听键盘弹出/隐藏事件
• 仅对当前聚焦的输入框添加底部偏移，不需要调整整个页面的布局
  代码示例：

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

// 固定屏幕高度，避免动态高度变化导致挤压
const SCREEN_HEIGHT = Dimensions.get('window').height;

const AuthForm = () => {
  const [inputMargin, setInputMargin] = useState(0);

  useEffect(() => {
    const showSub = Keyboard.addListener('keyboardDidShow', (event) => {
      // 可自定义判断逻辑：仅当输入框位置低于键盘顶部时才添加偏移
      const keyboardHeight = event.endCoordinates.height;
      setInputMargin(keyboardHeight / 3);
    });
    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
      setInputMargin(0);
    });

    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);

  return (
    <View style={[styles.container, { height: SCREEN_HEIGHT }]}>
      {/* 顶部固定内容不会被键盘顶起 */}
      <View style={styles.logoArea}>
        {/* Logo、标题等固定内容 */}
      </View>
      <View style={styles.formArea}>
        <TextInput 
          style={[styles.input, { marginBottom: inputMargin }]}
          placeholder="账号"
        />
        <TextInput 
          style={styles.input}
          placeholder="密码"
          secureTextEntry
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'stretch',
  },
  logoArea: {
    paddingTop: 80,
    paddingBottom: 60,
    alignItems: 'center',
  },
  formArea: {
    paddingHorizontal: 24,
  },
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#e5e7eb',
    borderRadius: 8,
    paddingHorizontal: 12,
    marginBottom: 16,
  }
});

export default AuthForm;

注意：根容器固定为屏幕高度，不要使用justifyContent: 'center'等随容器高度变化的布局属性，避免内容被挤压。

方案2：动态修改当前Activity软键盘调整模式 #

直接在运行时修改安卓系统的软键盘布局调整规则，不需要修改Manifest静态配置，设置后软键盘弹出会直接覆盖在页面上层，完全不会触发页面布局重排。

原生RN项目配置 #

在安卓端MainActivity.java的onCreate方法中添加一行代码即可：

import android.view.WindowManager;

// ... 其他代码
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // 新增这一行，设置软键盘弹出时不调整页面布局
  getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING);
}

Expo项目配置 #

无需修改原生代码，直接在JS端调用API即可：

import { setSoftInputMode, SoftInputMode } from 'expo-system-ui';
import { useEffect } from 'react';

const AuthForm = () => {
  useEffect(() => {
    // 页面进入时设置为不调整布局
    setSoftInputMode(SoftInputMode.ADJUST_NOTHING);
    return () => {
      // 页面离开时恢复默认设置，不影响其他页面
      setSoftInputMode(SoftInputMode.ADJUST_RESIZE);
    };
  }, []);

  // 其余表单代码
}

方案3：ScrollView嵌套固定高度页面 #

如果页面允许滚动，可直接用ScrollView作为根容器，固定内容容器最小高度为屏幕高度，键盘弹出时不会挤压页面内容，仅覆盖底部区域，用户可手动滚动查看被遮挡的输入框。

import { ScrollView, View, TextInput, StyleSheet, Dimensions } from 'react-native';

const SCREEN_HEIGHT = Dimensions.get('window').height;

const AuthForm = () => {
  return (
    <ScrollView 
      style={styles.container}
      contentContainerStyle={{ minHeight: SCREEN_HEIGHT }}
      keyboardShouldPersistTaps="handled"
    >
      {/* 所有页面内容放在此处，布局和无键盘时完全一致 */}
      <View style={styles.logoArea} />
      <View style={styles.formArea}>
        <TextInput style={styles.input} placeholder="账号" />
        <TextInput style={styles.input} placeholder="密码" secureTextEntry />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  // 其余样式和方案1一致
});

注意：不要搭配KeyboardAvoidingView使用，避免触发多余的布局偏移。

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