React Native Android端KeyboardAvoidingView包裹输入框点击后键盘立即隐藏问题

可行解决思路 #

• 第一步：检查android/app/src/main/AndroidManifest.xml中主Activity的windowSoftInputMode配置，修改为以下值：

  android:windowSoftInputMode="adjustResize"
  

  不要使用adjustPan配置，该模式会和KeyboardAvoidingView的布局计算逻辑冲突，导致键盘弹出后立即回弹隐藏。
• 第二步：修改KeyboardAvoidingView的behavior属性，Android端不需要指定height值，该参数是iOS端专用，Android端传入undefined即可，避免重复计算布局高度导致回弹。
• 第三步：给内部的FlatList添加keyboardShouldPersistTaps="handled"属性，避免点击输入框时触发点击事件穿透导致输入框失焦、键盘自动隐藏。
• 第四步：校正Android端的keyboardVerticalOffset值，需要叠加状态栏、导航栏的实际高度计算，避免偏移量不对导致输入框被遮挡。

修改后的参考代码：

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

// 外层容器
<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0} // Android端offset可以按需调整，adjustResize模式下通常不需要额外偏移
  style={{ flex: 1 }}
>
  {/* 内部FlatList */}
  <FlatList
    keyboardShouldPersistTaps="handled"
    // 其余你的FlatList原有配置
    data={/* 你的输入项数据 */}
    renderItem={/* 你的输入项渲染逻辑 */}
  />
</KeyboardAvoidingView>

如果以上修改后仍有问题，可以尝试移除KeyboardAvoidingView，直接使用第三方库react-native-keyboard-aware-scroll-view替代，该库对多端场景的兼容处理比官方组件更完善。

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