时间戳

首页 > 解决方案 > 当 React Native 中的文本溢出时，是否有任何方法可以覆盖 iOS TextInput 默认的省略号行为？

react-native - 当 React Native 中的文本溢出时，是否有任何方法可以覆盖 iOS TextInput 默认的省略号行为？

问题描述

末尾带有省略号的溢出文本输入

是否有任何方法可以覆盖 iOS 默认行为，即TextInput在文本溢出时将省略号放在末尾？我希望能够看到的是文本被截断之前的最后一个字符。

您可以使用任何TextInput. 下面是一些示例代码：

import React, { Component } from 'react';
 import { TextInput } from 'react-native';

 export default function UselessTextInput() {
   const [value, onChangeText] = React.useState('Useless Placeholder');

   return (
     <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text => onChangeText(text)}
      value={value}
    />
  );
}

标签： react-nativereact-native-ios

解决方案

您可以multiline按如下方式使用属性。numberOflines指定屏幕中可见行数（高度）。如果文本超过 4 行，则会自动添加滚动。请注意，我已经从样式中删除了高度。

<TextInput
    multiline
    editable
    numberOfLines={4}
    maxLength={4000}
    style={{ borderColor: 'gray', borderWidth: 1 }}
    onChangeText={text => onChangeText(text)}
    value={value}
/>

推荐阅读