截断文本 - React Native

Question

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

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

嗯，这是一个糟糕的逻辑！现在，当我将应用程序字体更改为大/小时，此逻辑将不起作用。它也不适用于汉字 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>

您也可以传递样式等其他属性。