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

Question

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

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

但是，在我的React Native应用程序中，情况并非如此。 1占用的宽度小于0或任何其他数字，所以它使文本跳到了整个地方，这真的很烦人。

这是一个很好的工作版本（请注意数字的每次更改，数字所在的'容器'的宽度永远不会改变？）这样可以确保顺利过渡：

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

我似乎无法找到解决方案。

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

任何指导将不胜感激。

Answer 1

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

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

信使

快递粗体

信使BoldOblique

信使斜

快递新

CourierNewPS-BoldItalicMT

CourierNewPS-BoldMT

CourierNewPS-ItalicMT

CourierNewPSMT

门罗粗体

门罗，BOLDITALIC

门罗斜体

门罗正规

Answer 2

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

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

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

Answer 3

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

字体选择：

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

OS条件语句

如果如果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>

我希望这是有帮助的 ：）