React Native TextInput滚动问题求助：输入3行后自动上滚实现

Hey there! I totally get where you're coming from—setting up a multi-line input that behaves exactly how you want can feel tricky when you're new to React Native. Let's break down how to build this step by step, no fancy hacks required.

Core Approach #

The key here is combining React Native's built-in TextInput props to cap the visible height at 3 lines, and enable scrolling automatically once content exceeds that space. Here's how to put it all together:

Step 1: Basic Working Setup #

First, we'll enable multi-line input, allow scrolling, and set a maxHeight to restrict the component to 3 lines. We'll also fix the vertical text alignment (the default center feels weird for multi-line inputs).

Here's a ready-to-use code example:

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

const ThreeLineInput = () => {
  const [inputText, setInputText] = useState('');
  
  // Adjust lineHeight to match your font size—24px is standard for 16px font
  const LINE_HEIGHT = 24;
  const MAX_LINES = 3;

  return (
    <View style={styles.container}>
      <TextInput
        value={inputText}
        onChangeText={setInputText}
        multiline={true}
        scrollEnabled={true}
        style={{
          ...styles.input,
          maxHeight: LINE_HEIGHT * MAX_LINES,
          lineHeight: LINE_HEIGHT,
        }}
        placeholder="Type up to 3 lines here..."
        textAlignVertical="top" // Makes text start at the top of the input
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 4,
    padding: 8,
    fontSize: 16,
  },
});

export default ThreeLineInput;

Step 2: Optional Auto-Scroll to Latest Content #

If you want the input to automatically scroll to the bottom as the user types beyond 3 lines (so they can always see their latest input), add a ref and trigger scroll on text change:

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

const ThreeLineInput = () => {
  const [inputText, setInputText] = useState('');
  const inputRef = useRef(null);
  
  const LINE_HEIGHT = 24;
  const MAX_LINES = 3;

  const handleTextChange = (newText) => {
    setInputText(newText);
    // Auto-scroll to the end of the input when text updates
    inputRef.current?.scrollToEnd({ animated: true });
  };

  return (
    <View style={styles.container}>
      <TextInput
        ref={inputRef}
        value={inputText}
        onChangeText={handleTextChange}
        multiline={true}
        scrollEnabled={true}
        style={{
          ...styles.input,
          maxHeight: LINE_HEIGHT * MAX_LINES,
          lineHeight: LINE_HEIGHT,
        }}
        placeholder="Type up to 3 lines here..."
        textAlignVertical="top"
      />
    </View>
  );
};

// ... styles remain the same

Quick Tips for Smooth Behavior #

• Line Height Matching: Make sure LINE_HEIGHT matches your input's actual line height. If you're using a custom font, you can measure it dynamically with onLayout, but hardcoding works for most standard setups.
• Scroll Trigger: scrollEnabled will automatically kick in once content exceeds the maxHeight—no extra logic needed for that.
• User Experience: textAlignVertical="top" is a small touch that makes the input feel much more natural for multi-line typing.

That's all you need! This setup will keep your TextInput constrained to 3 lines visually, and scroll automatically when content overflows.

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