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

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

如果你想读取更多的行为，那么你可以使用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>
}

您可以使用ellipsizeMode和numberolines。 如

<Text ellipsizeMode='tail' numberOfLines={2}>
  This very long text should be truncated with dots in the beginning.
</Text>

https://facebook.github.io/react-native/docs/text.html

在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}}，当省略号需要相对于其容器的大小应用时。适用于行布局等。

<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

结果内框:

<-- width = 100-->
 -----------------
| Lorem ipsum     |
| dolar sit a...  |
 -----------------