React Native中View内双Text组件排版异常求助

要实现第一个Text组件占满可用空间、超出内容显示省略号，第二个Text组件固定在右侧不省略的效果，调整代码如下：

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
  <Text 
    style={{ flex: 1, overflow: 'hidden' }}
    numberOfLines={1}
    ellipsizeMode='tail'
  >
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </Text>
  <Text style={{ marginLeft: 8 }}>
    1000ms
  </Text>
</View>

关键调整说明： #

• 给第一个Text添加flex: 1：让它自动占据父容器中除第二个Text之外的所有剩余空间，这是实现空间分配的核心
• 加上overflow: 'hidden'：iOS和Android端需要明确这个属性，才能配合numberOfLines={1}和ellipsizeMode='tail'触发内容裁剪和省略号显示（Web端会自动处理，但移动端必须显式设置）
• 父容器设置alignItems: 'center'：让两个文本垂直居中，优化视觉对齐效果
• 给第二个Text加marginLeft: 8：避免两个文本紧贴，提升排版美观度

原代码失效的原因是第一个Text没有设置flex: 1，它会优先渲染全部内容，导致第二个Text被挤压换行或超出容器，而Web端的布局渲染逻辑与React Native移动端存在差异，因此Web端能正常表现。

内容的提问来源于stack exchange，提问作者Vladimir Schneider