javascript - React Native - 如何为单个字符(数字、字母等)设置固定宽度

Question

我在构建的 React Native 应用程序中遇到问题。我有一个秒表，因为每个数字字符都有不同的宽度，当时间增加时，文本开始到处移动，而不是保持固定宽度。

例如，如果您有移动 iOS 设备，请打开设备附带的默认时钟应用程序并使用您的秒表。您会注意到 00:00:00 中的每个字符系列有一个固定的宽度，或者至少看起来是这样。如果其中一个 0 变成 1，即使 1 的宽度看起来更小，它仍然会填充相同数量的空间，因此文本不会到处跳动。

然而，在我的 React Native 应用程序中，情况并非如此。 1 占用的宽度小于 0 或任何其他数字，因此它会使文本到处跳动，这真的很烦人。

这是一个很好的工作版本(请注意每次更改数字时，数字所在的“容器”的宽度永远不会改变？)这确保了平滑过渡:

现在看看我的版本，一场灾难:

我似乎找不到解决办法。

我觉得解决这个问题的一种方法是让每个 Angular 色都在一个单独的 <Text> 中。设置宽度的标签，但我知道这完全是矫枉过正。必须有更简单的方法来做到这一点。

如有任何指导，我们将不胜感激。

Answer 1

iOS 中的系统字体是 San Francisco，默认情况下它具有比例数字，但包含固定宽度(等宽)数字的选项。使用 react-native，您必须在 Text 组件的样式上使用 fontVariant 属性:

<Text style={{fontVariant: ['tabular-nums']}}>
  1,234,567,890.12
</Text>

我很难找到它，因为名称不明确，也不是通常使用的名称。这是 RN 文档中文本 Prop 的链接:https://reactnative.dev/docs/text-style-props#fontvariant