React Native聊天页消息被键盘遮挡，KeyboardAvoidingView不生效如何解决？

安全阿岳

2026-10-12

解决方案

1. 修正KeyboardAvoidingView的层级
  你当前将KeyboardAvoidingView放在ScrollView内部，仅包裹消息列表，没有包裹底部输入框组件，导致键盘弹起时无法正确顶起整个输入区域。需要将KeyboardAvoidingView移到布局最外层，包裹所有页面内容。
1. 删除冲突的固定高度属性
  你给聊天内容容器设置了height: hp('90%')固定高度，和同节点的flex:1属性冲突，会阻止页面随键盘弹起自适应调整高度，直接删除该固定高度配置即可。
1. 完善KeyboardAvoidingView属性配置
  Android端不需要设置behavior为null，可设置为height适配，同时添加keyboardVerticalOffset属性适配状态栏/导航栏高度，避免偏移量错误。
1. 补充ScrollView交互属性
  给ScrollView添加keyboardShouldPersistTaps="handled"属性，避免点击输入框外区域时键盘异常回弹，同时可以添加键盘弹出事件监听，触发后让ScrollView自动滚动到最新消息位置。

// 最外层用KeyboardAvoidingView包裹
<KeyboardAvoidingView
  style={styles.container}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0} // 可根据你的状态栏高度调整数值
>
  {loading == true ? (
    <View style={{marginVertical: hp('45%')}}>
      <ActivityIndicator size="large" color={colors.primary} />
    </View>
  ) : (
    <View style={{flex:1}}>
      <SafeAreaView>
        <View style={styles.arrowBack}>
          <TouchableOpacity
            onPress={() => navigation.goBack()}
            style={styles.backIcon}>
            <Image source={require('../../images/back.png')} />
          </TouchableOpacity>
          <View style={styles.profileWrapper}>
            <View style={styles.profileContent}>
              <Text style={styles.profiletitle}>{item.name}</Text>
              <Text style={styles.profileaddress}>{item.address}</Text>
            </View>
          </View>
        </View>
      </SafeAreaView>
      {/* 删除height: hp('90%')配置 */}
      <View
        style={{
          backgroundColor: '#fff',
          borderTopLeftRadius: 40,
          borderTopRightRadius: 40,
          flex:1,
          justifyContent:'flex-end'
        }}>
        <ScrollView 
          style={{width:'100%', flexGrow:1}} 
          ref={scrollRef}
          keyboardShouldPersistTaps="handled"
        >
          <View style={{paddingTop:20, paddingHorizontal:20, paddingBottom:20}} >
            {dataPrev()}
          </View> 
          <View>
            {newMsgs()}
          </View>
        </ScrollView>
      </View>
    </View>
  )}
  {/* 输入框区域被KeyboardAvoidingView包裹，会自动被键盘顶起 */}
  <View style={{
    flexDirection:'row',
    borderBottomWidth:1, 
    borderColor:colors.primary,
    backgroundColor:'white' 
  }} >
    <TouchableOpacity style={{width:'90%'}} >
      <TextInput 
        placeholder="Type a message"
        defaultValue={buyerMsg}  
        onChangeText={buyerMsg => setBuyerMsg(buyerMsg)}
      />
    </TouchableOpacity>
    <View style={{width:'20%', alignContent:'center', alignSelf:'center'}} >
      <SendSvg onPress={()=>{sendmessage()}} />
    </View>
  </View>
</KeyboardAvoidingView>

若修改后Android端仍未生效，请检查：
AndroidManifest对应Activity是否仅配置了android:windowSoftInputMode="adjustResize"，不要同时添加adjustPan配置
若你的应用开启了沉浸式/边缘到边缘（edge-to-edge）模式，需要额外给根布局设置android:fitsSystemWindows="true"属性
若使用React Navigation导航库，可尝试在当前页面的Screen配置中添加softwareKeyboardLayoutMode: 'resize'参数

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