Question

有没有一种方法可以确定使用行数时文本将被截断吗？一直到处搜索，没有明确的答案。谢谢！

Answer 1

现在可以通过onTextLayout事件来实现，该事件包括一个lines数组被渲染出来。只需查看长度即可确定您是否已达到极限。 lines数组中还有其他详细信息，例如每行的实际高度和宽度，可以进一步用来确定文本是否被截断。

const NUM_OF_LINES = 5;
const SOME_LONG_TEXT_BLOCK = 'Fill in some long text yourself ...';

return (<Text
  numberOfLines={NUM_OF_LINES}
  onTextLayout={({ nativeEvent: { lines } }) =>
    setState({ showMoreButton: lines.length === NUM_OF_LINES })
  }
>
  {SOME_LONG_TEXT_BLOCK}
</Text>;

Answer 2

您可以将numberOfLines用作<Text />组件的道具。它取决于组件的宽度，然后计算文本的长度。该道具通常与ellipsizeMode一起使用。示例：

<Text numberOfLines={2} ellipsizeMode='tail'>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>

Answer 3

这对我有用:)

import React, { useState } from 'react'

import { Text } from 'rect-native'

export function MoreLessText({ children, numberOfLines }) {
  const [isTruncatedText, setIsTruncatedText] = useState(false)
  const [showMore, setShowMore] = useState(true)

  return isTruncatedText ? (
    <>
      <Text numberOfLines={showMore ? numberOfLines : 0}>{children}</Text>
      <Text onPress={() => setShowMore(!showMore)}">
        {showMore ? 'Read More' : 'Less'}
      </Text>
    </>
  ) : (
    <Text
      onTextLayout={(event) => {
        const { lines } = event.nativeEvent
        setIsTruncatedText(lines?.length > numberOfLines)
      }}
    >
      {children}
    </Text>
  )
}

Answer 4

使用 numberOfLines = {您想要什么行}

使用行数反应本机文本组件

4 个答案: