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

我在创建React Native应用程序时遇到问题。我有一个秒表，并且由于每个数字字符都有不同的宽度，所以当时间增加时，文本开始在整个地方移动，而不是以固定宽度保持机智。React Native - 如何为单个字符（数字，字母等）设置固定宽度

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

但是，在我的React Native应用程序中，情况并非如此。 1的宽度比0或其他任何数字的宽度都要小，所以它会让文字跳到所有的地方，这真的很烦人。

这里是一个很好，工作版本（注意如何在一个号码，“容器”这个数字是永远不会改变的宽度的每一个变化？）这确保平稳过渡：

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

我似乎无法找到解决这个。

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

任何指导，将不胜感激。

来源

2016-08-13 Lansana

使用固定宽度的字体将是最简单的解决方案。 – ppeterka

嗯，可以工作，我还没有在React Native中使用自定义字体，所以我没有想到这个选项。谢谢！ – Lansana

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

这里是一个附带的iOS一些可用的等宽字体的列表：

快递

传讯大胆

传讯BoldOblique

信使斜

速递新品

C ourierNewPS-BoldItalicMT

CourierNewPS-BoldMT

CourierNewPS-ItalicMT

CourierNewPSMT

门洛帕克粗体

门洛帕克，BOLDITALIC

门洛帕克斜体

门洛帕克正规

来源

2016-08-13 14:50:43 Lansana

我很确定“Helvetica Neue”是官方iOS秒表应用中使用的字体，因为它看起来相同并具有固定宽度的数字。 – cgenco

它也可能是[“Avenir”或“Avenir Next”]（http://iosfonts.com/），尽管我无法让字体权重看起来不错。 – cgenco

我知道这个问题是专门为iOS标记的，但是如果有人从Google提出这个问题并寻找支持iOS 和 Android（如我）的等宽文本的通用解决方案，那么这里有一个额外的资源给你！

字体选择：

react-native-training/react-native-fonts在GitHub上有字体的是每个平台上的一个很好的列表。如您所见，OP在their answer中提供的等宽字体之间没有重叠。然而，Android有一个叫做'monospace'的字体，可以用于这个用例。

OS条件语句

由于原生的反应，如果在fontFamily字体不存在将抛出一个错误，我们需要有条件地设置fontFamily中基于什么操作系统中使用。来自react-native的Platform.OS可用于确定设备操作系统。

例

// components/TextFixedWidth.js 
import React from 'react' 
import { View, 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>

我希望这是有益:)

来源

2018-01-03 06:26:22

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

回答

相关问题