React Native 设置字体大小以填充父级

Posted 2023-03-06

技术标签:

【中文标题】React Native 设置字体大小以填充父级【英文标题】：React Native set font size to fill parent 【发布时间】：2020-07-12 05:36:50 【问题描述】：

有没有办法将文本的 fontSize 设置为占用所有可分配空间？

例如我有一个包含多个元素的屏幕，我想在橙色元素中有一个文本，并告诉文本占据所有可用空间（橙色）。

【问题讨论】：

【参考方案1】：

我不知道这是否是最佳答案，但我认为您可以使用 React Native Dimensions API 来做到这一点。

查看我在snack.expo.io 中创建的示例：

https://snack.expo.io/@luaneduardo/19a766

希望对你有帮助:)

【讨论】：

【参考方案2】：

你可以设置font-size: 100%

但是！这个100%基于父元素font-size，而不是当前元素size。

因此，如果您希望您的字体充满当前元素，您可以采取一种方法：

<div style=fontSize: `800px`>
  <div style=height: `800px`, fontSize: `100%`>
    Some Text
  </div>
</div>

您可以根据自己的需求使其更加程序化。

参考：相关QA：CSS: 100% font size - 100% of what?

【讨论】：

以上是关于React Native 设置字体大小以填充父级的主要内容，如果未能解决你的问题，请参考以下文章