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

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

字符串

现在可以使用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>;

字符串

这对我来说很有效：）

import React, { useState } from 'react'

import { Text } from 'react-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>
  )
}

字符串

为了创建一个Instagram风格的评论，我这样做了（注意，我使用tailwind进行样式化，因为这是一个react原生应用程序，库是nativewind，我还使用了一个嵌套的文本，它允许我做一个web html <span>元素）：

const [more, setMore] = useState(false)

const toggleShowMore = () => {
 setMore(!more)
}
<View className=" pl-1 pt-1 flex-row flex-1 max-w-[82%]">
    <Text numberOfLines={!more ? 3 : undefined}>
         <Text onPress={() => navigateUser(comment.user.username)} className="font-bold">
                @{comment.user?.username}{' '}
         </Text>{' '}
         <Text onPress={toggleShowMore}>{comment.content}</Text>
     </Text>
 </View>

字符串