如何在React Native中获取截断的文本值？

问题描述

当我们使用 numberOfLines 时，是否存在某种方法可以在RN中获取截断的文本？

例如：

组件

 <Text style={{width: 50}} numberOfLines={3}>
    Some very long text with tons of useful info
 </Text>

输出

 Some
 very
 long...

我想知道最终用户可以看到什么文字。有可能吗？

感谢您的帮助！

P.S。我尝试使用Ref功能获取内容，但其中包含带有全文的道具，因此无济于事

解决方法

您可以像这样使用onTextLayout道具。

e.nativeEvent.lines在文本中包含每一行，如果您具有文本和行数，则可以像下面一样使用此数组并查看每一行中的文本。在Android（不确定网络）中可以使用此功能。

export default function App() {
  
  const text =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

  const lines = 3;

  return (
    <View style={{ flex: 1 }}>
      <Text
        onTextLayout={(e) => {
          const shownText = e.nativeEvent.lines.slice(0,lines).map((line) => line.text).join('');
          alert(shownText);
          const hidenText = text.substring(shownText.length);
          alert(hidenText);
        }}
        numberOfLines={lines}
        onPress={this.toggleUser}>
        {text}
      </Text>
    </View>
  );
}

,

You can combine numberOfLines and width / flex prop to achieve this effect.

<Text numberOfLines={1} style={{ width: 100 }}>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s,when an unknown
    printer took a galley of type and scrambled it to mak
</Text>