React Native字体比例

Question

我在View内缩放字体时遇到问题，或者更佳地说是在 Android 的React Native中在Text组件内说。问题是，我想让Text组件内的文本自动缩放取决于字符串的长度（如果文本可以容纳在View中并具有所需的字体大小，则不执行任何操作，并且如果此字体大小的字符串太长，则设置较小的字体大小）。 >

例如：

1。

<View style={{flexDirection: 'row'}}> <Text numberOfLines={1} style={{fontSize: 20}}>This is in one row.</Text> </View>

在这种情况下（1.），文本将在一行中以字体大小22呈现。

2。

<View style={{flexDirection: 'row'}}> <Text numberOfLines={1} style={{fontSize: 20}}>This is in one row and much longer text inside of Text component.</Text> </View>

在第二个（2.）方案中，文本将在一行中以...结尾，并且字体大小为20。但是，如果内容不能容纳在一行Text中，我想自动缩小字体零件。

我在寻找解决方案，发现对于 iOS ，您可以使用Text内的属性轻松解决此问题，如下所示：

<Text adjustsFontSizeToFit minimumFontScale={.4}>Automatically font scale</Text>

这不适用于 Android ，所以我真的需要帮助：/

如果有人知道我如何完成字体自动更改大小以适合一行文本，我将不胜感激。

先谢谢您！

Answer 1

问题是您需要为Text元素指定宽度。 请看一下link。

Answer 2

如果您拥有文本的最大宽度及其长度（以字符为单位），则可以计算合适的fontSize。类似于textWidth / textLength = fontWidth。但是，fontWidth（每个字符可用的宽度）与各自的fontSize完全相同的可能性很小。但是，如果您找到字体中最宽的字符，并找到其宽度与fontSize之间的相关性，则可以通过fontSize / fontWidth = c计算fontSize。因此，宽度将始终小于最大宽度。

例如，我发现对于Roboto Light字体，fontSize为30导致m的宽度为28,8px，在这种情况下，该字符为最宽字符。因此，fontSize是实际宽度的30 / 28,8倍。因此我们可以通过textWidth / textLength = fontSize / (30 / 28,8)

进行计算

如果您的字符中有任何额外的间距，并且您想要最小的字体大小，则可以使用Math.max(updatedFontSize, minimumFontSize)

来调整此值。