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

Question

当我们使用 numberOfLines 时，是否有一些方法可以在 RN 中获取截断文本？

例如：

组件

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

输出

 Some
 very
 long...

我想知道最终用户可以看到哪些文本。有可能吗？

感谢您的帮助！

P.S。我尝试使用 Ref 功能来获取内容，但它包含整个文本的道具，所以它没有帮助

Answer 1

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>

Answer 2

您可以像这样使用 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>
  );
}

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

How to get a Truncated text value in React Native?

text

ellipsis

truncated

react-native