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

Posted 2023-03-15

【中文标题】使用 numberOfLines 道具时，是不是可以知道 React Native 渲染了多少行文本？

【英文标题】：Is it possible to know how many lines of text are rendered by React Native when using numberOfLines prop?使用 numberOfLines 道具时，是否可以知道 React Native 渲染了多少行文本？

【发布时间】：2018-07-31 09:52:19

【问题描述】：

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

例如，我有一个<Text numberOfLines=2 ellipsizeMode='tail'>item.text</Text>这个表单的Text组件

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

【参考方案1】：

可能的答案在这里 herehttps://***.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>
  );

【讨论】：

据我所知，这仅适用于 android。 ios 确实返回一个数组，但它的长度始终为 1，无论文本有多长。

【参考方案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 组件中

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

我不完全确定这个解决方案，因为我只是从脑海中直接想到它。但是，我的逻辑是，如果您的文字高度大于您的文字 fontSize 是否意味着它不止一行？

让我知道它是否有效

【讨论】：

不得不玩。但这还不错。

【参考方案3】：

如果您不介意使用 npm 包 react-native-text-size 将解决您的问题。

来自他们的文档：

const size = await rnTextSize.measure(
  text,             // text to measure, can include symbols
  width,            // max-width of the "virtual" container
  ...fontSpecs,     // RN font specification
)

“size”不仅是大小，它还有更多信息，其中之一是lineCount，这正是您所需要的。 就个人而言，我需要在fontSpecs 中发送allowFontScaling: false，因为我们在内部处理。