截断文本 - React Native

Question

我有一个带有 FlatList 的 React Native 应用程序。

我添加的逻辑是，只要第 100 个位置的字符不为空，就应该添加 Expand/Collapse 箭头，如下所示。短消息没有箭头图标。

好吧，这是错误的逻辑！！现在，当我将我的应用程序字体更改为 Large/small 时，此逻辑将不起作用。它也不适用于汉字 LOL。所以它不应该基于字符数。

{  alert.charAt(100) !== "" ?
                arrowClicked === true ? 
                <Icon type='materialicons' name='arrow-drop-up' onPress={()=>{this.setFullLength()}}  />
                : 
                <Icon type='materialicons' name='arrow-drop-down' onPress={()=>{this.setFullLength()}}  />
                : null
            }

它应该检测到文本很长并且被截断了。我该如何实施？请帮助!!!!

Answer 1

您应该使用 onTextLayout 并使用类似下面的内容来决定行的长度。

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      {showMore && (
        <Button title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}

用法

  const text =
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak';

 <CustomText numberOfLines={2}>{text}</CustomText>

您也可以传递样式等其他道具。

截断文本 - React Native

Truncate Text - React Native

javascript

css

truncate

reactjs

react-native