RN 0.70.5 iOS端KeyboardAvoidingView与ScrollView组合出现空白间隙问题

问题根源 #

你的推测完全正确——React Native 0.70+新增的ScrollView.automaticallyAdjustKeyboardInsets属性会自动处理键盘适配逻辑，再叠加KeyboardAvoidingView会触发双重位移计算，最终导致滚动时最后一条消息和输入框之间出现键盘大小的空白间隙。

解决方案：移除KeyboardAvoidingView，利用ScrollView原生适配 #

直接通过ScrollView的内置属性完成所有适配，同时固定顶部栏和底部输入框，具体实现如下：

import { View, ScrollView, TextInput, StyleSheet, SafeAreaView } from 'react-native';

const ChatScreen = () => {
  // 统一定义输入栏高度，方便布局计算
  const INPUT_BAR_HEIGHT = 60;

  return (
    <View style={styles.container}>
      {/* 顶部固定栏 - 始终悬浮在页面最上方 */}
      <View style={styles.topBar}>
        {/* 此处放置标题、返回按钮等顶部内容 */}
      </View>

      {/* 聊天消息滚动容器 */}
      <ScrollView
        style={styles.messageScrollView}
        // 开启原生键盘适配，自动调整滚动区域位置
        automaticallyAdjustKeyboardInsets={true}
        // 给输入栏预留空间，避免最后一条消息被遮挡
        contentInset={{ bottom: INPUT_BAR_HEIGHT }}
        // 同步调整滚动指示器位置，和内容区域对齐
        scrollIndicatorInsets={{ bottom: INPUT_BAR_HEIGHT }}
        // 可选：消息更新时自动滚动到底部
        // ref={scrollViewRef}
        // onContentSizeChange={() => scrollViewRef.current?.scrollToEnd({ animated: true })}
      >
        {/* 此处渲染聊天消息列表 */}
      </ScrollView>

      {/* 底部固定输入栏 - 随键盘同步上移 */}
      <SafeAreaView style={styles.inputSafeArea}>
        <View style={[styles.inputBar, { height: INPUT_BAR_HEIGHT }]}>
          <TextInput
            style={styles.input}
            placeholder="输入消息..."
            placeholderTextColor="#999"
          />
        </View>
      </SafeAreaView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
  },
  topBar: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 60,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e5e5e5',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10, // 确保顶部栏在滚动内容上方
  },
  messageScrollView: {
    flex: 1,
    // 给顶部栏和输入栏留出固定空间
    marginTop: 60,
    marginBottom: 60,
  },
  inputSafeArea: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
  },
  inputBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
  },
  input: {
    flex: 1,
    height: 42,
    paddingHorizontal: 16,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 21,
    backgroundColor: '#fff',
  },
});

关键细节说明 #

1. 彻底移除KeyboardAvoidingView：删除所有相关代码，避免和automaticallyAdjustKeyboardInsets的适配逻辑冲突。
2. 顶部栏绝对定位：通过position: 'absolute'固定在页面顶部，设置zIndex确保不会被滚动内容覆盖。
3. ScrollView核心配置：
   • automaticallyAdjustKeyboardInsets={true}：让ScrollView自动根据键盘高度调整滚动区域，实现消息随键盘上移。
   • contentInset和scrollIndicatorInsets：给底部输入栏预留高度，保证滚动到底部时最后一条消息完全可见。
4. 输入栏用SafeAreaView包裹：适配iOS底部安全区（如刘海屏、灵动岛），避免输入框被系统栏遮挡。

额外注意事项 #

• 如果需要自动滚动到最新消息，可以给ScrollView添加ref，在消息更新时调用scrollToEnd方法。
• 测试时关闭iOS系统的"全键盘访问"等特殊设置，避免影响适配效果。

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