这里是JSX版本，如果有人使用简单的react，不知道react本机

import { useState } from "react";
    
    function ElipseText({ text, size = 500 }) {
      const [showMore, setShowMore] = useState(true)
      const renderText = (text) => {
        let textJSX = text;
        if (showMore) {
          textJSX = text.substring(0, size);
        }
        return (<span className="elipse-text">
          <p className="text01" dangerouslySetInnerHTML={{ __html: textJSX }} />
          &nbsp;&nbsp;
          <a className="btn01" onClick={() => setShowMore(!showMore)}>
            {!showMore && <svg width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M497.333 239.999H80.092l95.995-95.995l-22.627-22.627L18.837 256L153.46 390.623l22.627-22.627l-95.997-95.997h417.243v-32z"></path></svg>}
            {showMore ? "Show More" : "Show Less"}
            {showMore && <svg width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" fillRule="evenodd" d="M9.854 3.146L14.207 7.5l-4.353 4.354l-.708-.708L12.293 8H1V7h11.293L9.146 3.854l.708-.708Z" clipRule="evenodd"></path></svg>}
          </a>
        </span>)
      }
    
      return (
        <>
          {renderText(text)}
        </>
      )
    }
    
    export default ElipseText

SCSS文件

.elipse-text {
  .btn01 {
    display: inline-flex;
    color: var(--color-dark);
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-dark);
  }

  .text01 {
    display: contents;
  }
}

<View 
   style={{
        flexDirection: 'row',
        padding: 10,
    }}
>
  <Text numberOfLines={5} style={{flex:1}}>
       This is a very long text that will overflow on a small device This is a very 
       long text that will overflow on a small deviceThis is a very long text that 
       will overflow on a small deviceThis is a very long text that will overflow 
       on a small device
  </Text>
</View>

这里是JSX版本，如果有人使用简单的react，不知道react本机

import { useState } from "react";
    
    function ElipseText({ text, size = 500 }) {
      const [showMore, setShowMore] = useState(true)
      const renderText = (text) => {
        let textJSX = text;
        if (showMore) {
          textJSX = text.substring(0, size);
        }
        return (<span className="elipse-text">
          <p className="text01" dangerouslySetInnerHTML={{ __html: textJSX }} />
          &nbsp;&nbsp;
          <a className="btn01" onClick={() => setShowMore(!showMore)}>
            {!showMore && <svg width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M497.333 239.999H80.092l95.995-95.995l-22.627-22.627L18.837 256L153.46 390.623l22.627-22.627l-95.997-95.997h417.243v-32z"></path></svg>}
            {showMore ? "Show More" : "Show Less"}
            {showMore && <svg width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" fillRule="evenodd" d="M9.854 3.146L14.207 7.5l-4.353 4.354l-.708-.708L12.293 8H1V7h11.293L9.146 3.854l.708-.708Z" clipRule="evenodd"></path></svg>}
          </a>
        </span>)
      }
    
      return (
        <>
          {renderText(text)}
        </>
      )
    }
    
    export default ElipseText

SCSS文件

.elipse-text {
  .btn01 {
    display: inline-flex;
    color: var(--color-dark);
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-dark);
  }

  .text01 {
    display: contents;
  }
}

如果你想读取更多的行为，那么你可以使用react-native-read-more-text库:

NPM I react-native-read-more-text -save

<ReadMore
  numberOfLines={1}
  renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
  renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
>
  <Text>yourText</Text>
</ReadMore>

文档:https://github.com/expo/react-native-read-more-text

当内容小于numberolines时，要隐藏“read more”，你可以使用三元操作符:

{
  'yourText'.length > 50
  ?
  <ReadMore
    numberOfLines={1}
    renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
    renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
  >
    <Text>yourText</Text>
  </ReadMore>
  :
  <Text>yourText</Text>
}

在Text组件上使用numberolines参数:

<Text numberOfLines={1}>long long long long text<Text>

会产生:

long long long…

(假设你的容器宽度很短。)

使用ellipsizeMode参数将省略号移动到头部或中间。“Tail”为默认值。

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

会产生:

…long long text

注意:Text组件还应该包含style={{flex: 1}}，当省略号需要相对于其容器的大小应用时。适用于行布局等。

Const styles = theme => ({ contentClass: { 溢出:“隐藏”, textOverflow:“省略”, 显示:“-webkit-box”, WebkitLineClamp: 1、 WebkitBoxOrient:“垂直” ｝ }) Render () { 回报( < div className = {classes.contentClass} > {“内容”} < / div > ） ｝