React Native Text 不会增加高度以适应内容

Question

存在一个问题：当 Android 设备设置中字体为粗体时，文本组件的高度无法正确绘制内容区域。

adjustsFontSizeToFit={true}

，

numberOfLines={1}

不起作用，

numberOfLines

不予考虑，因为第二列中可以出现的内容可以是不同长度的值，而不仅仅是电话号码，我们需要将它们全部显示出来.

<View style={{ width: "100%", flexDirection: "row" }}>
  <Text style={{ width: 163 }}>Number</Text>
  <Text style={{ flex: 1 }}>012-3456-7890</Text>
</View>

最后一个词

0

被隐藏：

当给View.style设置高度：80时，结果是： 在第一个屏幕截图中，

0

并未被截断或丢失，它只是不可见，因为文本组件没有足够的空间。在这种情况下，如果我删除

View.style.height

并在第二列中添加另一个零，它看起来会像这样。这意味着无论

View.style.height

属性如何，区域的高度都应该增长以匹配 Text 组件内容的长度，并且您可以看到在第一种情况下，Text 组件的高度没有绘制得足够高匹配内容的长度。

在您的测试设备上，在设备设置中将字体设置为粗体，并适当调整第一列的宽度以重现问题。

有没有根本性的解决办法来解决这个问题？

Answer 1

根据文档，设置

numberOfLines={0}

应该允许文本换行。另外，将 flex 添加到包含视图可能会有所帮助。试试这个：

<View style={{ width: "100%", flexDirection: "row", flex: 1 }}>
  <Text style={{ width: 163 }} numberOfLines={0}>Number</Text>
  <Text style={{ flex: 1 }} numberOfLines={0}>012-3456-7890</Text>
</View>