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

Question

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

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

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

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

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

我似乎找不到解决办法。

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

任何指导将不胜感激。

Answer 1

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

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

我很难找到它，因为它的名称不明确，也不是通常使用的名称。这是 RN 文档上 Text 道具的链接：https://facebook.github.io/react-native/docs/text.html#style

Answer 2

虽然这个问题是针对 iOS 标记的，但如果有人正在寻找在 iOS 和 Android 上都支持等宽文本的通用解决方案（就像我一样），那么这里有一个额外的资源给你！

字体选择：

react-native-training/react-native-fonts 在 GitHub 上有一个很好的每个平台上的字体列表。如您所见，OP 在their answer 中提供的等宽字体之间没有重叠。但是，Android 有一种名为“monospace”的字体适用于这种用例。

操作系统条件语句

由于如果 fontFamily 中的字体不存在，React Native 会抛出错误，我们需要根据操作系统中可用的字体有条件地设置 fontFamily。 react-native 中的Platform.OS 可用于确定设备操作系统。

示例

// components/TextFixedWidth.js
import React from 'react'
import { Platform, Text } from 'react-native'

export default function TextFixedWidth ({ children }) {
  const fontFamily = Platform.OS === 'ios' ? 'Courier' : 'monospace'

  return (
      <Text style={{fontFamily}}>{ children }</Text>
  )
}

然后

// in a render method somewhere in the app
<TextFixedWidth>
  Any monospace text you want!
</TextFixedWidth>

我希望这会有所帮助:)

Answer 3

感谢@ppeterka，我找到了一个超级简单的解决方案，只需要一行代码：使用等宽字体。

以下是 iOS 附带的一些可用等宽字体的列表：

快递

Courier-Bold

Courier-BoldOblique

快递-斜交

新快递

CourierNewPS-BoldItalicMT

CourierNewPS-BoldMT

CourierNewPS-ItalicMT

CourierNewPSMT

Menlo-Bold

Menlo-BoldItalic

Menlo-斜体

Menlo-Regular