反应本机设置字体大小以填充父级

Question

是否可以设置文本的fontSize来占据所有不合理的空间？

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

Answer 1

您可以设置 viewof lineCircle = vl.data(doubled).title('Total Cases of Covid-19 in Michigan') .encode( vl.x({timeUnit: 'monthdate'}).fieldT('date').title('Date (2020)').axis({labelAngle: 15}), vl.y().fieldQ('cases').scale({type: 'log', domain: [2, 20000]}).axis({values: [2, 10, 100, 1000, 4500, 10000, 20000]}).title('Cases') ) .layer( vl.markLine({clip: true, color: 'gray', strokeDash: [8, 8]}) .encode( vl.y().fieldQ('double') ), vl.markLine({clip: true, color: 'gray', strokeDash: [8, 8]}) .encode( vl.y().fieldQ('threedays') ), vl.markLine(), vl.markCircle({size: 60}) .encode( vl.tooltip().field('cases') ) ).width(700).height(500).render()

但！！此font-size: 100%基于父元素100%，而不基于当前元素font-size。

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

size

然后，您可以根据自己的需求以编程方式进行修改。

---

参考：相关质量检查：CSS: 100% font size - 100% of what?

Answer 2

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

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

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

希望它会有所帮助：）