如何让React Native文本组件根据内容自动适配尺寸？

你遇到的核心问题很明确：两个Text组件都设置了flex:1，导致它们强制平分可用空间——这就是短文本时左侧留大片空白、长文本时又过早被截断的原因。

要实现你想要的效果（短文本仅占自身所需最小空间，长文本尽可能扩展直到挤压右侧组件到临界值时自动省略），只需要调整两个组件的flex布局属性即可：

关键布局逻辑 #

• 让右侧的alertCount组件仅占用自身内容所需的宽度，永远不被压缩（保证它始终能完整显示）。
• 让左侧的alertTitle组件占据剩余的所有可用空间，当内容超过这个空间时自动触发省略号。

修改后的完整代码 #

export function Heading(props) {
  const { title, number } = props;
  let alertCountText = " - 1 Alert";
  if (number !== 1) {
    alertCountText = ` - ${number} Alerts`;
  }
  return (
    <View style={expandedStyle.header}>
      <Text 
        numberOfLines={1} 
        ellipsizeMode="tail" // 明确指定省略模式，可选head/middle/tail
        style={[expandedStyle.alertTitle]}
      >
        {title}
      </Text>
      <Text style={[expandedStyle.alertCount]}>
        {alertCountText}
      </Text>
    </View>
  );
}

const expandedStyle = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  alertTitle: {
    flex: 1, // 占据除右侧组件外的所有剩余空间
    fontFamily: "Lato-Bold",
    fontSize: 16,
    fontWeight: "bold",
    fontStyle: "normal",
    lineHeight: 18
  },
  alertCount: {
    flexShrink: 0, // 强制保持自身内容宽度，不被左侧组件挤压
    fontFamily: "Lato-Regular",
    fontSize: 14,
    fontWeight: "normal",
    fontStyle: "normal",
    lineHeight: 14,
    marginLeft: 8 // 可选：添加小间距让两个文本不挤在一起
  }
});

效果验证 #

• 短文本场景：alertTitle仅占用自身内容宽度，alertCount紧跟其后，不会出现不必要的空白。
• 长文本场景：alertTitle会尽可能扩展，直到alertCount刚好能完整显示的临界值，之后超出部分自动显示省略号。

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