React Native flex:1布局下长文本被挤压重叠如何实现省略号效果

解决方法 #

核心要同时满足两个布局约束：一是文本组件配置截断规则，二是文本的父容器必须有明确宽度限制，不能被超长内容撑开。

具体修改点 #

• 给第一个包裹Text的View添加flexShrink: 1，强制该容器不会被内容撑开，仅占用flex布局分配的固定宽度
• 给Text组件添加3个属性：
  • numberOfLines={1}：限制文本仅展示1行
  • ellipsizeMode="tail"：指定超出行宽的内容在末尾显示省略号
  • width: '100%'：确保文本铺满父容器的可用宽度

修复后的完整代码 #

<View style={{ flexDirection: "row", padding: 5 }}>
   <View style={{ flex: 1, flexShrink: 1 }}>
       <Text 
         numberOfLines={1}
         ellipsizeMode="tail"
         style={{ width: '100%' }}
       >
         Just a reallyyyyyyyy longgggg text
       </Text>
   </View>

   <View style={{ flex: 1, padding: 10 }}>
      <Button style={{width: 130, height: 30}} ... />
   </View>
</View>

可选优化（固定按钮区域宽度的场景） #

如果不需要两个View严格平分宽度，只想让按钮区域完整展示固定尺寸的按钮，可以把第二个View的flex:1属性移除，改为适配按钮的固定宽度即可，第一个View的flex:1会自动占满行内剩余所有空间，适配性更强：

<View style={{ flexDirection: "row", padding: 5 }}>
   <View style={{ flex: 1, marginRight: 10 }}>
       <Text 
         numberOfLines={1}
         ellipsizeMode="tail"
         style={{ width: '100%' }}
       >
         Just a reallyyyyyyyy longgggg text
       </Text>
   </View>

   <View style={{ padding: 10, width: 150 }}>
      <Button style={{width: 130, height: 30}} ... />
   </View>
</View>

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