react native text size

ネイティブのテキストサイズを反応します

レイアウトする前にテキストを正確に測定し、アプリ（AndroidとiOS）からフォント情報を取得します。

私の国（メキシコ）では、ソフトウェア開発者の支払いが不十分なので、生計を立てるために別の仕事を探しなければなりませんでした。長年にわたって私のためにお金を生み出してきたこのリポジトリや他のリポジトリをメインにするためにもっと時間を費やすことはできません。誰かがこのリポジトリの維持に介入している場合、関連するNPMパッケージとともに、彼らにそれを転送させていただきます。
私の国（メキシコ）では、ソフトウェア開発者が恐ろしいので、私は生計を立てるために別の仕事を探しなければなりませんでした。そして、私はこれ以上の時間を費やすことはできません。誰かがこのリポジトリを維持することに興味がある場合、私はそれを喜んで転送し、関連するNPMパッケージを転送します。

2つの主な機能があります。 <FlatList>や<RecyclerListView>などのコンポーネント用に最適化された、異なるテキストブロックの高さを同時に取得するためのflatHeights 。

もう1つはmeasureです。これは、テキストのテキストに関する詳細情報を取得します。

• テキストで使用される幅は、最大の行の実際の幅を計算するオプションを備えています。
• パディングの有無にかかわらず、テキストの高さ。
• 行数。
• 最後の行の幅。
• 特定の行の拡張情報。

幅と高さは、同じプロパティを持つ<Text>コンポーネントのonLayoutイベントから受け取ったものと同じように実用的です。

両方の関数では、測定すべきテキストが必要ですが、残りのパラメーターはオプションであり、Reactネイティブと同じ方法で機能します。

• fontFamily
• fontSize
• fontWeight
• fontStyle
• fontVariant （iOS）
• includeFontPadding （android）
• textBreakStrategy （Android）
• letterSpacing
• allowFontScaling
• width ：テキストブローク戦略に基づく自動ラインブレイクの制約。

Adionionでは、ライブラリには、アプリに表示されるフォントに関する情報を取得する機能が含まれています。

それがあなたを助けてくれたなら、星€€€®またはKo-fiで私の仕事をサポートしてください。

インストール

主にNPMからの自動インストール

yarn add react-native-text-size
react-native link react-native-text-size

Android/App/build.graleファイルの依存関係ブロックでcompileディレクティブをimplementationに変更します。

要件：

• ネイティブV0.57以降を反応します。
• Android API 16またはiOS 9.0以上。

ネイティブの0.56の前のバージョンについては、React-Native-Text-Size V2.1.1を使用してください

自動インストールに問題がある場合は、代替案としてWikiの手動インストールを参照してください。

API

• measure

• flatHeights

• specsForTextStyles

• fontFromSpecs

• fontFamilyNames

• fontNamesForFamilyName

測定

 measure ( options : TSMeasureParams ) : Promise < TSMeasureResult >

この関数は、RNがそうであるようにテキストを測定し、その結果はTextのOnlayoutイベントの結果とともに構成されています。使用するフォントとOHERオプションを記述するために<Text>で使用されるプロパティのサブセットが必要です。

widthを提供する場合、測定は明示的なラインブレークに加えて自動ランピングを適用します。

* iOSには一貫性のないものがあるかもしれません。この問題を知るために、この問題を知ることができます。

注記：

この関数は正確で完全な情報を提供しますが、フラットリストに表示できるように、テキストがたくさんある場合は重くなる可能性があります。これらの場合、バッチ処理に最適化されたflatHeights使用する方が良いです。

tsmeasureParams

このプロパティを備えたプレーンJSオブジェクト（ textのみが必要です）：

財産	タイプ	デフォルト	メモ
文章	弦	（なし）	これは唯一の必要なパラメーターであり、絵文字を含むか、空である場合がありますが、 nullであってはなりません。 これが空の文字列の場合、結果のwidthゼロになります。
フォントファミリー	弦	私は依存しています	デフォルトは、Reactネイティブによって適用されるのと同じです：AndroidのRoboto、iOSのサンフランシスコ。 注：デバイスメーカーまたはカスタムROMは、デフォルトのフォントを変更できます。
フォント級	弦	'普通'	Androidでは、粒度があり、「500」から「900」は「太字」になりますが、特定の重量のfontFamilyを使用できます（「Sans-Serif-Thin」、「Sans-Serif-Medium」など）。
fontsize	番号	14	デフォルトのフォントサイズはRNからのものです。
fontstyle	弦	'普通'	「正常」または「斜体」の1つ。
fontvariant	配列	（なし）	iOSのみ
AllowFontScaling	ブール	真実	ユーザーの大きなフォントの設定を尊重するために（つまり、SPユニットを使用します）。
レターペーシング	番号	（なし）	文字間の追加の間隔（別名tracking ）。 注： iOSでは、ゼロは自動カーニングをキャンセルします。 API 21+を備えたすべてのiOS、Android
includefontpadding	ブール	真実	特定の文字の切り抜きを避けるために、追加の上部と下部のパディング。 Androidのみ
TextBreakTrategy	弦	「高品質」	「シンプル」、「バランス」、または「高品質」の1つ。 Androidのみ、API 23+
幅	番号	max_int	幅を制限します。結果の高さは、テキストの自動フローによって異なります。
useprecisewidth	ブール	間違い	true場合、結果には正確なwidthとlastLineWidthプロパティが含まれます。 サンプルアプリでこのフラグの効果を確認できます。
lineinfoforline	番号	（なし）	>=0場合、結果には、必要な行番号の情報が記載されたLineINFOプロパティが含まれます。

サンプルアプリは、画面上のこれらのパラメーターの効果をインタラクティブに示しています。

tsmeasureresult

measureこのプロパティでJSオブジェクトに解決する約束を返します。

財産	タイプ	メモ
幅	番号	総使用幅。 LESまたはwidthオプションに等しい場合があります。 Androidでは、この値はusePreciseWidthフラグによって異なる場合があります。
身長	番号	includingFontPadding場合の上部と下のパディングを含む総高さが設定されました（デフォルト）。
LastLineWidth	番号	ブランクを追いかけることなく、最後の線の幅。 usePreciseWidthがfalse （デフォルト）の場合、このプロパティは未定義です。
linecount	番号	ラインの数、ハードおよび自動ラインの破損を考慮します。
Lineinfo	物体	ライン情報。 lineInfoForLineオプションが与えられない場合、このプロパティは未定義です。

Lineinfo

lineInfoForLineの値がグリーターまたは等しいlineCountである場合、この情報は最後の行（つまり、 lineCount -1）のものです。

財産	タイプ	メモ
ライン	番号	この情報の行番号、ベース0。 lineInfoForLineラインよりも少ない場合があります。
始める	番号	この行の開始のテキストオフセット。
終わり	番号	この行の最後の可視文字（したがって、白面はカウントされない）の後にテキストオフセット。
底	番号	パディングを含むこのラインの底の垂直位置。
幅	番号	先導の縁のインデントを含む、このラインの水平方向のexte。 使用usePreciseWidth:true 。

エラーの場合、リテラル文字列として、次のエラーコードのいずれかを備えた拡張オブジェクトで約束が拒否されます。

コード	詳細
e_missing_parameters	measureには、パラメーターを備えたオブジェクトが必要であり、提供されませんでした。
e_missing_text	測定するテキストはnullであるか、提供されていません。
e_invalid_font_spec	フォント仕様は無効です。これがAndroidで発生する可能性は低いです。
e_unknown_error	まあ...誰が知っていますか？

例

 //...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'

type Props = { }
type State = { width : number , height : number }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
  fontFamily = undefined ,
  fontSize = 24 ,
  fontStyle = 'italic' ,
  fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'

class Test extends Component < Props , State > {
  state = {
    width : 0 ,
    height : 0 ,
  }

  async componentDidMount ( ) {
    const width = Dimensions . get ( 'window' ) . width * 0.8
    const size = await rnTextSize . measure ( {
      text ,             // text to measure, can include symbols
      width ,            // max-width of the "virtual" container
      ... fontSpecs ,     // RN font specification
    } )
    this . setState ( {
      width : size . width ,
      height : size . height
    } )
  }

  // The result is reversible
  render ( ) {
    const { width , height } = this . state
    return (
      < View style = { { padding : 12 } } >
        < Text style = { { width , height , ... fontSpecs } } >
          { text }
        </ Text >
      </ View >
    )
  }
} 

flatheights

 flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >

配列内の各文字列の高さを計算します。

これは、一般的な特性（幅<RecyclerListView>フォントなど）を持つ数字のテキストブロックの高さを計算したケース<FlatList>指定されたmeasureに代わるものです。

測定はmeasureと同じアルゴリズムを使用しますが、各ブロックの高さのみを返し、ブリッジを通る複数のステップを避けることで、Androidでより速くなります。

5,000のランダムテキストブロックでテストを行いましたが、これらは結果（MS）でした。

	measure	flatHeights
アンドロイド	49,624	1,091
iOS	1,949	732

将来的には、同じカードにフラットリストと複数のスタイルを使用したその使用例を準備します。

tsheightsparams

これは、 measureために渡すものと同様のオブジェクトですが、 textオプションは文字列の配列であり、 usePreciseWidthとlineInfoForLineオプションは無視されます。

財産	タイプ	デフォルト
文章	弦 []	（なし）
幅	番号	無限
フォントファミリー	弦	私は依存しています
フォント級	弦	'普通'
fontsize	番号	14
fontstyle	弦	'普通'
fontvariant	配列	（なし）
AllowFontScaling	ブール	真実
レターペーシング	番号	（なし）
includefontpadding	ブール	真実
TextBreakTrategy	弦	「高品質」

結果は、ブロックを受信したのと同じ順序で、各ブロックの高さ（ SP ）の高さを持つ配列に解決する約束です。

測定とは異なり、 null要素はエラーを生成せずに0を返し、空の文字列はRNがnull <Text>コンポーネントに割り当てるのと同じ高さを返します。

例

 //...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'

type Props = { texts : string [ ] }
type State = { heights : number [ ] }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
  fontFamily = undefined ,
  fontSize = 24 ,
  fontStyle = 'italic' ,
  fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]

class Test extends Component < Props , State > {
  state = {
    heights : [ ] ,
  }

  async componentDidMount ( ) {
    const { texts } = this . props
    const width = Dimensions . get ( 'window' ) . width * 0.8
    const heights = await rnTextSize . flatHeights ( {
      text : texts ,      // array of texts to measure, can include symbols
      width ,            // max-width of the "virtual" container
      ... fontSpecs ,     // RN font specification
    } )
    this . setState ( {
      heights
    } )
  }

  render ( ) {
    const { texts } = this . props
    const { heights } = this . state
    
    return (
      < View style = { { padding : 12 } } >
        { texts . map (
          ( text , index ) => (
            < Text style = { { height : heights [ index ] , ... fontSpecs } } >
              { text }
            </ Text >
          )
        ) }
      </ View >
    )
  }
} 

SpecstortextStyles

 specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >

実行中のOSのシステムフォント情報を取得します。

これはUIFont.preferredFontForTextStyle Orosのラッパーです

その結果、キーがOSに依存するJSオブジェクトに解決する約束がありますが、その値はRNスタイルで使用されるオブジェクトに完全に互換性のあるものであるため、 <Text>または<TextInput>コンポーネントを整えるために使用できます。

tsfontfortyle

財産	タイプ	メモ
フォントファミリー	弦	システム姓またはフォントフェイス。
fontsize	番号	SPのフォントサイズ（非スケール）。
fontstyle	tsfontstyle	「イタリック」の場合にのみ、スタイルが「通常」である場合に定義されていません。
フォント級	tsfontweight	「太字」の場合にのみ、重量が「正常」である場合に定義されていません。
fontvariant	tsfontvariant []またはnull	iOSのみ。現在、このプロパティが含まれるスタイルはありません。
レターペーシング	番号	0.55よりもRN LoowerでAndroidで実行されている場合は省略

キー名を知るには、WikiのSpecstortextStylesのキーをご覧ください。

2つまたは3つを除いて、結果のキーを正規化しようとしていません。2つまたは3つを除き、各OSに異なる解釈がありますが、それらを使用してニーズに応じて税関スタイルを作成できます。

fontfromspecs

 fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >

指定された仕様から取得したフォントの特性を返します。

tsfontspecs

このパラメーターはTSMeasureParamsのサブセットであるため、詳細は省略されています。

財産	タイプ	デフォルト
フォントファミリー	弦	iOS： 'San Francisco'、Android： 'roboto'
フォント級	弦	'普通'
fontsize	番号	14
fontstyle	弦	'普通'
fontvariant	弦 []	（なし）
レターペーシング	番号	0

fontFromSpecs 、暗黙のallowsFontScaling:trueと、これは測定関数ではないため、意味のないincludeFontPadding 。

tsfontinfo

結果は、指定されたフォントとサイズの情報、AndroidのSPのユニットまたはiOSのポイントを使用してJSオブジェクトに解決する約束です。

財産	タイプ	詳細
フォントファミリー	弦	Androidでは、パラメーターと渡された文字列です。
fontname	弦	iOSのみ、常にAndroidでundefined 。
fontsize	番号	パラメーターに小数が含まれている場合、指定されたパラメーターとは異なる場合があります。
fontstyle	弦	「通常」または「イタリック」。
フォント級	弦	iOSの「通常」または「太字」は、「100」から「900」に移動できます。
fontvariant	弦 []	iOSのみ、常にAndroidでundefined 。
上昇します	番号	シングルされた間隔テキストのベースラインの上の推奨距離。
降ります	番号	シングルされた間隔テキストのベースラインの下の推奨距離。
Capheight	番号	iOSの唯一の資本文字の高さ。
Xheight	番号	iOS小文字「x」の唯一の高さ。
トップ	番号	Androidのみ。フォント内のTallles Glyphのベースラインの最大距離。
底	番号	Androidのみ。フォント内の最低グリフのベースラインの最大距離。
リーディング	番号	テキストの行の間に追加するための推奨される追加スペース。
ラインハイト	番号	推奨される線の高さ。テキストに絵文字などのユニコード記号が含まれている場合は、より大きくなければなりません。
_ハッシュ	番号	ハッシュコードは、デバッグに役立つ場合があります。

*フロートの使用は整数よりも正確であり、好みの丸め方法を使用できますが、この値では5桁以下の精度を使用できます。また、RNはAndroidのサブピクセルで動作しないことを忘れないでください。この値は切り捨てます。

詳細を参照してください：

Googleマテリアルデザインサイトでタイポグラフィを理解する。

iOSのiOSでのテキスト処理について。

fontfamilynames

 fontFamilyNames ( ) : Promise < string [ ] >

システムで利用可能な一連のフォントファミリ名の約束を返します。

iOSでは、これはuikitのUIFont.familyNamesメソッドを使用します。

Androidでは、システムフォントの結果はハードコーディングされ、アプリがインストールしたフォントがある場合（もしあれば）、動的に補完されます。

WikiのAndroidフォントとカスタムフォントについては、このリストの詳細をご覧ください。

fontnamesforfamilyname

 fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] >

UIFont.fontNamesForFamilyName uikitメソッドのラッパーは、特定のフォントファミリで利用可能なフォント名の配列を返します。

rntextsizeのfontFamilyNames関数を使用して、システム上の利用可能なフォントファミリ名の配列を取得できます。

これはiOSのみの機能であり、Androidでは常にnullに解決します。

既知の問題

プラットフォーム間の一貫性のない幅

iOSでは、結果として得られる両方の幅、 measureとflatHeightsは、Androidでは廃棄されている間、主要な空白が含まれます。

不正な高さ（iOS）

iOSでは、RNは画面上の絶対位置を考慮して、寸法を計算します。 rntextsizeはそれを行うことができず、幅と高さの両方が最大1ピクセルの差を持つことができます（ポイントではありません）。

スケーリング（iOS）ではないレターペース

RNはダイナミックタイプのサイズをサポートしletterSpacingいませんが、この機能を模倣allowFontScalingた優れた仕事を行います。

RNの将来のバージョンがこの問題を解決することを願っています。

ラインハイトサポート

RNTExtSizeは、結果のlineHeight合計関数で提供しますが、非標準アルゴリズムを使用して設定するために使用するパラメーターとしてサポートしていません。厳密に困needしない限り、 lineHeightを使用しないことをお勧めしますが、使用する場合は、フォントサイズよりも30％またはそれ以上にするか、より精度が必要な場合はrntextsize fontFromSpecsメソッドを使用してください。

ネストされたテキスト

ネストされた<Text>コンポーネント（または内部の画像付き）

全て

• フォント情報の正規化された追跡または文字間隔。
• AndroidやiOSテレビなど、より多くのテスト。
• より良いドキュメントを作るために、美しい英語を学びましょう。
• 醜い目標cで素敵なフィント亜亜亜属。

私の仕事をサポートしてください

私は20年以上の経験を持つフルスタック開発者であり、私の仕事のほとんどを無料で共有し、他の人を助けようとしていますが、これにはかなりの時間と労力がかかります。

もちろん、フィードバック、PR、星も大歓迎ですか？

ご支援ありがとうございます！

ライセンス

BSD 2節の「簡素化」ライセンス。

©2018-2019、AlbertoMartínez。無断転載を禁じます。