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中的系统字体为San Francisco，默认情况下具有比例数字，但包含用于固定宽度（等宽）数字的选项。对于react-native，您必须fontVariant在Text组件的样式上使用该属性：

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

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

Answer 3

尽管这个问题是针对iOS的，但如果有人正在寻找一种支持iOS 和 Android 上的等宽文本的通用解决方案（像我以前一样），那么这里有一个额外的资源供您使用！

字体选择：

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

OS条件语句

由于如果fontFamily中的字体不存在，react native将引发错误，因此我们将需要根据操作系统中可用的内容有条件地设置fontFamily。Platform.OS来自react-native的信息可用于确定设备的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>

我希望这是有帮助的 ：）