React Native - 固定幅を個々の文字に設定する方法（数字、文字など）

Question

ビルドしているReact Nativeアプリに問題があります。私はストップウォッチを持っていて、各数字の文字は幅が違うので、時間が増えるとテキストが一定の幅で触れているのとは対照的に、場所全体を移動し始めます。

たとえば、モバイルiOS端末をお持ちの場合は、出荷時のデフォルトの時計アプリを開き、ストップウォッチを使用します。 00:00:00シリーズの各キャラクターは一定の幅を持っていることに気づくでしょう。 0のうちの1つが1に変わると、1の幅は一見小さくなりますが、それでも同じ量のスペースがいっぱいになるので、テキストはすべての場所にジャンプしません。

私のリアクションネイティブアプリでは、そうではありません。 1は0または他の任意の数よりも幅が狭いので、テキストがどこにでもジャンプしてしまい、本当に面倒です。

：ここ

が良い、作業バージョン。これは、スムーズな移行を保証します（？番号、番号が変わることはありませんである「コンテナ」の幅の各変化にどのように注意してください）です

は今、私のバージョンで災害を見てみましょう：私はこれに対する解決策を見つけることができないよう

。

私はこれを解決するための1つの方法は、別の<Text>タグの幅を持つ別の文字を持つことだと思っていますが、私はそれが完全に過度になることがわかります。これを行う簡単な方法が必要です。

ガイダンスをいただければ幸いです。

Answer 1

@ppeterkaのおかげで、これにはモノスペースフォントを使用するという1行のコードが必要な非常に簡単な解決策が見つかりました。ここで

は、iOSに同梱されているいくつかの可能な等幅フォントのリストです：

クーリエ

急使大胆

急使BoldOblique

クーリエ・斜め

宅配便新

C ourierNewPS-BoldItalicMT

CourierNewPS-BoldMT

CourierNewPS-ItalicMT

CourierNewPSMT

メンロー-太字

メンロー-bolditalicのいずれ

メンロー-斜体

メンロパーク、正規

Answer 2

私は具体的にはこの質問にタグが付いていることを知っていますが、誰かがGoogleからこの質問に来て、iOS と Android（私のようでした）の両方でモノスペーステキストをサポートする汎用ソリューションを探している場合は、ここにあなたのための追加リソースがあります！

フォントの選択：GitHubの上

react-native-training/react-native-fonts各プラットフォーム上にあるフォントの良いリストを持っています。ご覧のとおり、their answerで提供されているモノスペースフォントの間に重複はありません。しかし、Androidには、モノスペースというフォントがあり、この使用例では機能します。

のfontFamilyのフォントが存在しない場合は、エラーがスローされますネイティブ反応するので

OS条件文は、我々は条件付きでOSで利用可能な何に基づいているfontFamily設定する必要があります。反応ネイティブからのPlatform.OSを使用して、デバイス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> 

私は、これは便利です願っています:)