如何截断React Native的TextInput组件内容？

嘿，我太懂这种困扰了！Text组件加个numberOfLines={1}就能轻松截断，但TextInput确实不吃这一套——默认输入长文本就会横向滚动，完全达不到我们要的截断效果。不过别担心，有两种靠谱的方法能解决这个问题：

方法一：样式层面实现显示截断（不限制输入长度） #

如果只是想让输入框显示的时候截断文本加省略号，实际输入还是允许用户输入长内容，那直接给TextInput加几个样式属性就行：

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

export function Input() {
  const [inputValue, setInputValue] = useState('');

  return (
    <View style={{ flex: 1, width: 200 }}> {/* 给容器设置固定宽度，或直接给TextInput设宽度 */}
      <TextInput
        value={inputValue}
        onChangeText={setInputValue}
        style={{
          backgroundColor: "red",
          whiteSpace: 'nowrap', // 禁止文本换行
          overflow: 'hidden', // 超出容器的内容隐藏
          textOverflow: 'ellipsis', // 超出部分显示省略号
          width: '100%', // 确保输入框宽度固定
        }}
      />
    </View>
  );
}

这个方法的好处是简单直接，不用处理复杂的文本逻辑，但要注意：用户输入的内容还是完整的，只是输入框显示时被截断了。

方法二：结合状态管理，限制输入并手动添加省略号 #

如果想严格限制输入内容长度，同时让显示的文本末尾自动加“...”，那就要通过状态来控制输入内容：

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

// 设定允许的最大显示字符数
const MAX_CHAR_COUNT = 10;

export function Input() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (text) => {
    // 先移除文本中可能存在的省略号，避免重复添加
    const cleanText = text.replace(/\.\.\.$/, '');
    if (cleanText.length > MAX_CHAR_COUNT) {
      // 截断到指定长度，加上省略号
      setInputValue(cleanText.slice(0, MAX_CHAR_COUNT) + '...');
    } else {
      setInputValue(cleanText);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <TextInput
        value={inputValue}
        onChangeText={handleInputChange}
        style={{ backgroundColor: "red" }}
      />
    </View>
  );
}

这个方法会直接限制输入的内容长度，超出后自动截断并添加省略号，而且处理了用户删除文本时省略号自动消失的场景，体验更流畅。

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