如何防止React Native中TextInput聚焦时键盘触发页面收缩

问题原因 #

• 安卓端出现该问题的核心原因是默认的windowSoftInputMode配置为adjustResize：软键盘弹出时会主动压缩App根布局的可用高度，你使用的Flex布局是基于父容器高度按比例分配空间的，根容器高度变小后所有Flex子元素都会被挤压变形。
• iOS端出现该问题一般是未正确适配键盘弹出的布局偏移规则，Flex布局的高度计算和键盘遮挡逻辑发生了冲突。

解决方法 #

安卓端适配方案 #

方案1：修改全局软键盘模式（最常用）

打开安卓项目路径下的android/app/src/main/AndroidManifest.xml，找到主Activity节点的android:windowSoftInputMode属性，将值修改为adjustPan即可。修改后软键盘弹出时不会压缩根布局高度，只会将整个页面向上平移到输入框不被遮挡的位置，完全不影响原有Flex布局的计算逻辑。
配置示例：

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

方案2：局部适配不修改全局配置

如果你的App其他页面依赖adjustResize的特性，不想修改全局配置，可以用react-native-keyboard-aware-scroll-view组件包裹当前页面的内容，组件会自动处理键盘弹出的布局偏移，不会挤压原有Flex结构。

iOS端适配方案 #

给页面外层包裹KeyboardAvoidingView原生组件，同时根据平台指定适配行为即可，示例代码如下：

import { KeyboardAvoidingView, Platform, View } from 'react-native';

const YourPage = () => {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      {/* 原有页面的Flex布局内容 */}
      <View style={{flex:1}}>
        {/* 其他组件、TextInput等 */}
      </View>
    </KeyboardAvoidingView>
  )
}

如果页面本身有滚动需求，也可以直接用react-native-keyboard-aware-scroll-view包裹内容，自动适配键盘弹出的偏移量。

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