React Native多行TextInput如何随输入自动滚动？

核心思路是借助React Native原生API，监听光标位置与内容变化，手动控制滚动容器的偏移量，确保输入光标始终处于可视区域内，无需依赖已归档的第三方库。

具体实现步骤 #

1. 用ScrollView包裹TextInput #

将原本嵌套在View中的TextInput放入ScrollView组件内，为ScrollView添加ref用于后续控制滚动行为。

2. 监听光标与内容变化 #

通过TextInput的onSelectionChange事件获取光标位置，结合onContentSizeChange监听内容高度变化，这两个事件是触发自动滚动的关键。

3. 计算偏移并触发滚动 #

利用measureLayout方法获取光标相对ScrollView的坐标，计算需要滚动的偏移量，调用ScrollView的scrollTo方法调整位置，保证光标区域可见。

完整代码示例 #

import React, { useRef, useState } from 'react';
import { View, ScrollView, TextInput, StyleSheet } from 'react-native';

const AutoScrollTextInput = () => {
  const scrollViewRef = useRef(null);
  const textInputRef = useRef(null);
  const [text, setText] = useState('');

  const handleSelectionChange = (event) => {
    const { selection } = event.nativeEvent;
    // 仅处理光标定位场景，排除文本选中状态
    if (selection.start === selection.end) {
      textInputRef.current?.measureLayout(
        scrollViewRef.current,
        (x, y) => {
          // 让光标顶部距离滚动容器顶部保留20px间距，提升输入舒适度
          const targetOffset = y - 20;
          scrollViewRef.current?.scrollTo({
            y: targetOffset,
            animated: true,
          });
        },
        () => {}
      );
    }
  };

  return (
    <View style={styles.container}>
      <ScrollView ref={scrollViewRef} style={styles.scrollView}>
        <TextInput
          ref={textInputRef}
          style={styles.textInput}
          multiline
          value={text}
          onChangeText={setText}
          onSelectionChange={handleSelectionChange}
          placeholder="输入内容..."
        />
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  scrollView: {
    flex: 1,
  },
  textInput: {
    flex: 1,
    minHeight: 100,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
  },
});

export default AutoScrollTextInput;

关键细节说明 #

• measureLayout方法：用于获取光标位置相对于ScrollView的坐标，是计算滚动偏移的核心依据。
• 平滑滚动：设置scrollTo的animated为true，让滚动过程更自然，避免突兀感。
• 场景过滤：仅在光标定位时触发滚动，避免选中文本时的不必要滚动干扰。

额外优化方向 #

• 结合Keyboard模块监听键盘弹出事件，动态调整ScrollView内边距或滚动位置，适配键盘遮挡场景。
• 根据产品需求自定义光标与顶部的间距，优化输入区域的视觉体验。

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