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 - 如何爲單個字符（數字，字母等）設置固定寬度

回答

相關問題