KeyboardAvoidingView使用异常求助：TextInput下方出现空白

我在使用behavior="padding"的KeyboardAvoidingView时遇到了异常：当在TextInput中输入文本时，组件下方会出现一块空白区域。以下是我的相关代码，有人能帮忙分析问题原因吗？

render() {
  return (
    <KeyboardAvoidingView style={{ flex: 1}} behavior="padding">
      <View style={{ flex: 1, backgroundColor: "#FFFFFF", }} >
        <ScrollView contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
          <ChatInfo />
        </ScrollView>
        <View style={styles.container}>
          <TextInput style={styles.input} underlineColorAndroid="transparent" autoCapitalize="none" onChangeText={text => this.setState({ text: text })} value={this.state.text} />
          <TouchableOpacity style={styles.submitButton} onPress={this.submitName} >
            <Text style={styles.submitButtonText}> SEND </Text>
          </TouchableOpacity>
        </View>
      </View>
    </KeyboardAvoidingView>
  );
}
}
export default connect()(ChatScreen);
const styles = StyleSheet.create({
  input: {
    margin: 2,
    paddingLeft: 15,
    flex: 1,
    height: 40,
    padding: 10,
    fontSize: 14,
    fontWeight: "400"
  },
  container: {
    borderTopWidth: 1,
    minWidth: "100%",
    borderColor: "#cccccc",
    height: 44,
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "#fff"
  },
  submitButtonText: {
    color: "#0a9ffc",
    fontSize: 14,
    fontWeight: "500"
  },
  submitButton: {
    backgroundColor: "#fff",
    padding: 10,
    margin: 2,
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  }
});

我之前也碰到过类似的问题，核心原因是**KeyboardAvoidingView的padding行为和内部嵌套的flex布局冲突**，具体来说：

当你设置behavior="padding"时，KeyboardAvoidingView会在键盘弹出时给自身动态添加paddingBottom来避开键盘，但你的布局里有三层嵌套的flex:1（KeyboardAvoidingView → 内部根View → ScrollView），再加上ScrollView的contentContainerStyle设置了justifyContent: "flex-end"，这就导致布局计算出现偏差：键盘弹出时KeyboardAvoidingView的padding把内部视图的高度“挤”变了，而ScrollView的内容始终靠底部对齐，视觉上就出现了下方的空白区域。

给你几个可行的解决思路：

1. 缩小KeyboardAvoidingView的作用范围（最推荐） #

把KeyboardAvoidingView只包裹底部的输入栏，而不是整个页面。这样键盘弹出时只会调整输入栏的位置，不会影响上方的聊天内容区域，从根源上避免布局冲突：

render() {
  return (
    <View style={{ flex: 1, backgroundColor: "#FFFFFF" }}>
      <ScrollView contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
        <ChatInfo />
      </ScrollView>
      {/* 只给输入栏加KeyboardAvoidingView */}
      <KeyboardAvoidingView behavior="padding">
        <View style={styles.container}>
          <TextInput style={styles.input} underlineColorAndroid="transparent" autoCapitalize="none" onChangeText={text => this.setState({ text: text })} value={this.state.text} />
          <TouchableOpacity style={styles.submitButton} onPress={this.submitName} >
            <Text style={styles.submitButtonText}> SEND </Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    </View>
  );
}

2. 调整ScrollView的contentContainer样式 #

移除contentContainerStyle中的flex:1，因为ScrollView本身已经设置了flex:1，重复设置会干扰布局计算：

<ScrollView contentContainerStyle={{ justifyContent: "flex-end" }}>
  <ChatInfo />
</ScrollView>

3. 添加keyboardVerticalOffset属性抵消偏差 #

如果必须让KeyboardAvoidingView包裹整个页面，可以通过这个属性手动调整偏移量，值可以根据你的导航栏高度或者实际布局情况微调（比如iOS导航栏通常是64）：

<KeyboardAvoidingView style={{ flex: 1}} behavior="padding" keyboardVerticalOffset={64}>

另外提一句，Android端可以配合在AndroidManifest.xml里设置android:windowSoftInputMode="adjustResize"，让系统帮你调整布局，效果会更稳定。

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