React native 如何根据本地文本组件中的文本调整其大小？

我有两个相邻的文本组件

第一个应该扩展到内部文本所需的范围，当第二个压缩到一行以外时，应切换到省略号

e、 g

其中，条形图是可用空间的终点

目前发生的情况是，不管alertProfile组件中的文本是什么，它总是占据屏幕的相同百分比，因此我得到了一个包含短文本的巨大空白。同时，长文本被过早截断，因此我在警报后使用了未使用的空白

e、 g

我的问题是如何让长文本尽可能多地使用空间，而短文本尽可能少地使用空间。

下面是代码示例

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} 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: {
    flex: 1,
    fontFamily: "Lato-Regular",
    fontSize: 14,
    fontWeight: "normal",
    fontStyle: "normal",
    lineHeight: 14
  }
});

导出功能标题（道具）{
常量{title，number}=props；
让alertCountText=“-1警报”；
如果（数字！==1）{
alertCountText=`-${number}警报`；
}
返回(
{title}
{alertCountText}
);
}
const expandedStyle=StyleSheet.create({
标题：{
弹性：1，
flexDirection:“行”，
justifyContent:“灵活启动”，
对齐项目：“中心”
},
标题：{
弹性：1，
fontFamily：“Lato Bold”，
尺寸：16，
fontWeight：“粗体”，
fontStyle:“正常”，
线高：18
},
警报计数：{
弹性：1，
fontFamily：“Lato常规”，
尺寸：14，
fontWeight:“正常”，
fontStyle:“正常”，
线高：14
}
});

检查这个。我不太确定

react native

。但根据您的要求，这一款可以完美地与flexbox配合使用，因此我猜这将是一个有价值的答案

.wrapper{
显示：内联flex；
宽度：70%；
边框：1px实心#ddd；
边缘底部：10px；
}
.文本{
显示：内联块；
空白：nowrap；
最大宽度：计算（100%-100px）；
溢出：隐藏；
文本溢出：省略号；
}
.警惕{
左边距：5px；
}

正文
警觉的
长文本
警觉的
非常长的文本
警觉的

检查这个。我不太确定

react native

。但根据您的要求，这一款可以完美地与flexbox配合使用，因此我猜这将是一个有价值的答案

.wrapper{
显示：内联flex；
宽度：70%；
边框：1px实心#ddd；
边缘底部：10px；
}
.文本{
显示：内联块；
空白：nowrap；
最大宽度：计算（100%-100px）；
溢出：隐藏；
文本溢出：省略号；
}
.警惕{
左边距：5px；
}

正文
警觉的
长文本
警觉的
非常长的文本
警觉的

干杯。怀疑react native中不支持这样的内联块，但肯定给了我一个可以查看的地方。干杯。怀疑react native中不支持这样的内联块，但肯定给了我一个可以查看的地方。

Short text              - 1 Alert                |

Really really really... - 1 Alert                |

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} 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: {
    flex: 1,
    fontFamily: "Lato-Regular",
    fontSize: 14,
    fontWeight: "normal",
    fontStyle: "normal",
    lineHeight: 14
  }
});