React Native中实现longText行数限制且末尾显示time的问题

要实现加粗文本 + 限制行数的长文本 + 紧跟末尾的时间，核心是利用React Native中Text组件的嵌套特性，将numberOfLines和ellipsizeMode设置在最外层父Text上，让所有文本处于同一文本流中。

调整后的代码示例 #

<Text 
  style={components.text} 
  numberOfLines={2} 
  ellipsizeMode='tail'
>
  <Text isBold={true}>{boldText}</Text>
  <Text> {longText}</Text>
  <Text> {time}</Text>
</Text>

// 样式可简化，Text默认是行内文本布局
text: {
  fontSize: 14,    
  width: "80%",
}

关键说明 #

• React Native的numberOfLines仅对最外层Text组件生效，子Text会继承父组件的文本流规则，整个内容会被统一限制在指定行数内，时间会自然紧跟在长文本之后——即使长文本被截断，省略号也会出现在时间前方。
• 无需将父组件改为View，因为View是块级布局，无法让文本保持连贯的换行逻辑，而Text组件默认的行内布局能完美实现需求中的文本排列效果。

内容的提问来源于stack exchange，提问作者Fernanda Itoda