react-native - 使用 numberOfLines Prop 时，是否可以知道 React Native 渲染了多少行文本？

Question

React Native numberOfLines Prop 非常有用，但我想根据实际呈现的文本行数以编程方式调整两个数字之间的行高度。

例如，我有一个这种形式的 Text 组件 <Text numberOfLines={2} ellipsizeMode={'tail'}>{item.text}</Text>
如果文本长于两行，则根据需要默认为两行。但是当它少于两行时，它只显示一行，再次根据需要。我只想知道内容是单留置权还是两行。有什么办法可以找出来吗？

Answer 1

可能的答案在这里
here https://stackoverflow.com/a/58632169/11816387
我想提供一个现代的解决方案。现在有一个 onTextLayout包含一系列行的事件，可以确定正在渲染的行数。 lines中还有其他详细信息数组就像每个 line 的实际高度和宽度这可以进一步用于确定文本是否被截断。

const NUM_OF_LINES = 5;
const SOME_LONG_TEXT_BLOCK = 'Lorem ipsum ...';

function SomeComponent () { 
  const [ showMore, setShowMore ] = useState(false);
  const onTextLayout = useCallback(e =>
    setShowMore(e.nativeEvent.lines.length > NUM_OF_LINES);
  }, []);

  return (
    <Text numberOfLines={NUM_OF_LINES} onTextLayout={onTextLayout}>
      {SOME_LONG_TEXT_BLOCK}
    </Text>
  );
}