从 <Text> 组件获取行数

Question

我正在使用 React Native 开发应用程序。

我有一个显示文本元素的“卡片”组件，它可以包含任意数量的字符。

所以现在我正在尝试为我的卡片设置一个动态高度。我的想法是，如果行数为1，则设置一定的高度，如果行数为2，则设置更大的高度，如果行数为3或更多，则设置更大的高度（用省略号截断文本）。

有什么方法可以获取拍摄的台词数量，从而确定我应该使用的高度？

一个选项是根据字符的数量来执行此操作，但这在不同大小的设备上无法正常工作。

我觉得这很简单，而且有一种通用的方法，但我似乎无法实现它。

谢谢！

Answer 1

一个直接的解决方案是获取文本输入的编译高度并将其除以您在样式中设置的行高。

<Text onLayout={(event) => {
  const {height} = event.nativeEvent.layout;
  const lineHeight = 14;
  console.log('my text has'+ height/lineHeight +' lines')
}} />

Answer 2

这是我的解决方案。它在 android

上完美运行

  const [textLength, setTextLength] = useState(0);
  const onTextLayout = useCallback(e => {
    setTextLength(e.nativeEvent.lines.length);
  }, []);

  return (
    <Text onTextLayout={onTextLayout}>
      {SOME_TEXT_BLOCK}
    </Text>
  );

从 <Text> 组件获取行数

Get amount of lines from <Text> component

javascript

components

react-native

react-native-android