Android端KeyboardAvoidingView遮挡输入框，输入框无法紧贴键盘求助

问题分析 #

当前代码存在两个核心问题：

• KeyboardAvoidingView未配置有效behavior，无法正确响应键盘弹出事件
• 输入框容器使用绝对定位，导致无法自动跟随键盘高度调整，出现间隙

具体修改方案 #

1. 正确配置KeyboardAvoidingView
   Android平台推荐使用behavior="padding"，同时通过keyboardVerticalOffset适配状态栏高度，避免计算偏差：

   <KeyboardAvoidingView 
     behavior="padding" 
     keyboardVerticalOffset={StatusBar.currentHeight}
     style={styles.screen}
   >
   

2. 调整输入框容器布局
   移除绝对定位，通过父容器的justifyContent: 'flex-end'将输入框固定在屏幕底部，让KeyboardAvoidingView自动处理键盘弹出时的偏移：

   screen: {
     flex: 1,
     backgroundColor: '#0B0D15',
     justifyContent: 'flex-end',
   },
   chatRequestContainer: {
     paddingVertical: 8,
     minHeight: 60,
     maxHeight: 140,
     borderTopWidth: 1,
     borderTopColor: '#222841',
     paddingHorizontal: 10,
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
     width: '100%',
   },
   

3. 优化输入框与按钮样式
   给输入框添加右侧间距，避免和按钮重叠；调整输入框内边距，保证内容居中，同时设置最小高度适配多行输入：

   textInput: {
     backgroundColor: '#161A2A',
     borderRadius: 30,
     paddingHorizontal: 15,
     paddingVertical: 12,
     flex: 1,
     minHeight: 44,
     marginRight: 10,
   },
   sendBtn: {
     backgroundColor: '#222841',
     width: 55,
     height: 55,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 35,
   },
   

修改后完整代码 #

import { StatusBar, KeyboardAvoidingView, View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
// 假设Send组件已导入，colors已定义

return (
  <KeyboardAvoidingView 
    behavior="padding" 
    keyboardVerticalOffset={StatusBar.currentHeight}
    style={styles.screen}
  >
    {/* 页面其他内容可放在此处 */}
    <View style={styles.chatRequestContainer}>
      <TextInput
        multiline
        style={styles.textInput}
        placeholderTextColor={colors.secondary}
        placeholder="Write your request"
      />
      <TouchableOpacity activeOpacity={0.8} style={styles.sendBtn}>
        <Send width={25} height={25} stroke={'#fff'} />
      </TouchableOpacity>
    </View>
  </KeyboardAvoidingView>
)

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#0B0D15',
    justifyContent: 'flex-end',
  },
  chatRequestContainer: {
    paddingVertical: 8,
    minHeight: 60,
    maxHeight: 140,
    borderTopWidth: 1,
    borderTopColor: '#222841',
    paddingHorizontal: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    width: '100%',
  },
  textInput: {
    backgroundColor: '#161A2A',
    borderRadius: 30,
    paddingHorizontal: 15,
    paddingVertical: 12,
    flex: 1,
    minHeight: 44,
    marginRight: 10,
  },
  sendBtn: {
    backgroundColor: '#222841',
    width: 55,
    height: 55,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 35,
  },
});

额外注意事项 #

• 若仍存在间隙，可调整keyboardVerticalOffset数值（比如设为0），适配不同机型的导航栏高度
• 测试时覆盖Android不同版本，部分定制ROM的键盘行为可能存在差异

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