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

Question

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

例如，我有一个这种形式的 Text 组件 <Text numberOfLines={2} ellipsizeMode={'tail'}>{item.text}</Text>

如果文本长于两行，则根据需要默认为两行。但是当它少于两行时，它只显示一行，再次根据需要。我只想知道内容是单留置权还是两行。有什么办法可以找出来吗？

Answer 1

可能的答案在 这里/sf/answers/4104251861/

我想提供一个现代的解决方案。现在有一个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>
  );
}

Answer 2

在 React Native 中，Text 组件有一个名为 onLayout 的 props

http://facebook.github.io/react-native/docs/text.html#onlayout

和{nativeEvent: {layout: {x, y, width, height}}}

首先，有一个状态

state = {
  numOfLines: 0
}

然后在你的文本组件中

<Text 
  numberOfLines={this.state.numOfLines}
  onLayout={(e) => { 
    this.setState({ numOfLines: e.nativeEvent.layout.height > YOUR_FONT_SIZE ? 2 : 1 })
  }
>
  {item.text}
</Text>

我对这个解决方案并不完全确定，因为我只是立即从我的脑海中想到它。但是，我的逻辑是，如果您的文本高度大于文本字体大小，则意味着它不止一行？

让我知道这是否有效