react native text size下載 - react native text size源代碼下載

react native text size

字體下載

v3.0.0

下載

反應本地文字大小

在佈置之前準確測量文本並從您的應用程序（Android和iOS）中獲取字體信息。

在我的國家（墨西哥），軟件開發人員的薪水很差，因此我不得不尋找另一份工作來謀生，而且我不能花更多的時間來主持這些多年來需要為我帶來任何錢的這個和其他存儲庫。如果有人在維護此存儲庫方面被帶上，我很樂意將其與關聯的NPM軟件包一起將其轉移給他們。
在我的國家（墨西哥），軟件開發人員感到恐懼，因此我不得不尋找另一份工作來謀生，而且我不能花更多的時間保留這個和其他存儲庫，而不是從未賺錢。如果有人有興趣維護此存儲庫，我將很樂意將其轉移，以及相關的NPM軟件包。

有兩個主要功能：同時獲得不同文本塊的flatHeights ，對<FlatList>或<RecyclerListView>等組件進行了優化。

另一個是measure ，它獲取有關文本文本的詳細信息：

文本使用的寬度，並有一個可以計算最大線的實際寬度的選項。
文本的高度，有或沒有槳。
線數。
最後一行的寬度。
給定行的擴展信息。

寬度和高度與具有相同屬性的<Text>組件的onLayout事件所收到的寬度和高度相同。

在這兩個功能中，都需要測量的文本，但其餘參數都是可選的，並且以與React Antial相同的方式工作：

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

將compile指令更改為在Android/App/build.grale.graled文件的依賴項塊中implementation 。

要求：

反應天然V0.57或更高版本。
Android API 16或iOS 9.0及以上。

對於Arect Native 0.56之前的版本，請使用React-Native-text-size v2.1.1

如果您在自動安裝方面存在問題，請參見Wiki上的手動安裝作為替代方案。

API

measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName

措施

 measure ( options : TSMeasureParams ) : Promise < TSMeasureResult >

該功能像RN一樣測量文本，其結果與Text的on Laylout事件的結果組成。它採用<Text>使用的屬性的子集來描述要使用的字體和OHER選項。

如果提供width ，則測量將應用自動包裝，除了明確的線路斷裂。

* iOS中可能存在不一致的情況，請看到這個知道的問題以了解更多。

筆記：

儘管此功能是準確的，並且提供了完整的信息，但是如果文本很多，則可能很重，就像可以在flatlist中顯示的文本一樣。在這些情況下，最好使用flatHeights ，這是針對批處理處理進行了優化的。

tsMeasureParams

具有此屬性的普通JS對象（僅需要text ）：

財產	類型	預設	筆記
文字	細繩	（沒有任何）	這是唯一必需的參數，可能包括表情符號或為空，但不能為`null` 。如果這是一個空字符串，則結果`width`將為零。
fontfomily	細繩	我依靠	默認值與React Native：Android中的Roboto相同，iOS中的舊金山。注意：設備製造商或自定義ROM可以更改默認字體。
量級	細繩	'普通的'	在Android上，數字範圍您沒有粒度，而“ 500”至“ 900”變為“大膽”，但是您可以使用特定重量的`fontFamily` （“ sans-serif-thin”，“ sans-serif-medium”等）。
字體大小	數字	14	默認字體大小來自RN。
fontstyle	細繩	'普通的'	“正常”或“斜體”之一。
fontvariant	大批	（沒有任何）	僅iOS
允許施法	布爾	真的	尊重用戶的大字體設置（即使用SP單元）。
信件	數字	（沒有任何）	字符之間的其他間距（又稱`tracking` ）。注意：在iOS中，零取消自動kerning。所有的iOS，具有API 21+的Android
包括fontpadding	布爾	真的	增加頂部和底部填充，以避免剪切某些字符。僅Android
TextbreakStrategy	細繩	“高質”	“簡單”，“平衡”或“高質量”之一。僅使用Android，API 23+
寬度	數字	max_int	限制寬度。結果高度會根據文本的自動流而有所不同。
use -precisewidth	布爾	錯誤的	如果為`true` ，則結果將包括精確的`width`和`lastLineWidth`屬性。您可以在示例應用程序中看到此標誌的效果。
lineinfoforline	數字	（沒有任何）	如果`>=0` ，則結果將包括LineInfo屬性，其中包含所需行號的信息。

示例應用程序在屏幕上互動地顯示了這些參數的效果。

tsmeasuresult

measure返回帶有此屬性的JS對象的承諾：

財產	類型	筆記
寬度	數字	總使用寬度。它可能是LES或等於`width`選項。在Android上，此值可能會因`usePreciseWidth`標誌而有所不同。
高度	數字	總高度，包括頂部和底部填充（ `includingFontPadding` ）（默認值）。
LastLineWidth	數字	最後一行的寬度，沒有落後的空白。如果`usePreciseWidth`為`false` （默認值），則該屬性是未定義的。
LineCount	數字	線數，考慮到硬且自動的線路斷路。
lineinfo	目的	線信息。如果未給出`lineInfoForLine`選項，則此屬性是未定義的。

lineinfo

如果lineInfoForLine的值是GREELTER或相等的lineCount ，則此信息適用於最後一行（即lineCount -1）。

財產	類型	筆記
線	數字	此信息的行號，基礎0。它可能小於`lineInfoForLine`線。
開始	數字	本行開頭的文本偏移。
結尾	數字	在此行上，最後一個可見字符（因此不計算空格）之後的文本偏移量。
底部	數字	該線底部的垂直位置，包括填充。
寬度	數字	這條線的水平外觀，包括領先的邊緣縮進，但不包括落後的空格。使用`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 ( options : TSHeightsParams ) : Promise < number [ ] >

計算陣列中每個字符串的高度。

這是指定為您計算具有常見特徵（寬度，字體等）的數量文本塊高度的案例指定的measure方法，典型的用例，帶有<FlatList>或<RecyclerListView>組件。

該測量使用與measure相同的算法，但僅返回每個塊的高度，並且通過避免通過橋樑多個步驟，它在Android上的速度更快！

我對5,000個隨機文本塊進行了測試，這些是結果（MS）：

	`measure`	`flatHeights`
安卓	49,624	1,091
ios	1,949	732

將來，我將準備一個示例，以在同一張卡上使用Flatlist和多種樣式。

tsheightsparams

這是一個類似於您measure的對象，但text選項是一系列字符串，忽略了usePreciseWidth和lineInfoForLine選項。

財產	類型	預設
文字	細繩 []	（沒有任何）
寬度	數字	無窮大
fontfomily	細繩	我依靠
量級	細繩	'普通的'
字體大小	數字	14
fontstyle	細繩	'普通的'
fontvariant	大批	（沒有任何）
允許施法	布爾	真的
信件	數字	（沒有任何）
包括fontpadding	布爾	真的
TextbreakStrategy	細繩	“高質”

結果是一個承諾，可以按照收到塊的相同順序解決每個塊（sp）的高度（ 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 >
    )
  }
}

SpecSfortExtStyles

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

獲取運行OS的系統字體信息。

這是UIFont.preferredFontForTextStyle Oros的包裝紙

結果是解決JS對象WHOE鍵取決於OS的承諾，但值又是對obs的依賴對象完全兼容的RN樣式中使用的，因此可以用於樣式化<Text>或<text>或<TextInput>組件：

tsfontfortyle

財產	類型	筆記
fontfomily	細繩	系統姓氏或字體面。
字體大小	數字	sp中的字體尺寸（未量化）。
fontstyle	tsfontstyle	只有“斜體”，如果樣式為“正常”，則不確定。
量級	tsfont量級	只有“大膽”，如果重量為“正常”，則不確定。
fontvariant	tsfontvariant []或null	僅iOS 。目前，沒有樣式包括此屬性。
信件	數字	如果在Android上使用RN慢速運行，則被省略

要了解關鍵名稱，請參閱Wiki中SpecFortextStyles的鍵。

我沒有試圖將結果的鍵標準化，因為除了兩三個外，它們在每個操作系統中都有不同的解釋，但是您可以根據您的需求使用它們來創建海關樣式。

fontfromspecs

 fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >

返回從給定規範獲得的字體的特性。

tsfontspecs

此參數是TSMeasureParams的子集，因此此處省略了詳細信息。

財產	類型	預設
fontfomily	細繩	ios：'舊金山'，Android：'Roboto'
量級	細繩	'普通的'
字體大小	數字	14
fontstyle	細繩	'普通的'
fontvariant	細繩 []	（沒有任何）
信件	數字	0

fontFromSpecs使用隱式allowsFontScaling:true ，並且，由於這不是測量功能，因此includeFontPadding您沒有意義的fontpadding。

tsfontinfo

結果是一種承諾，可以使用給定字體和尺寸， sp中的sp或iOS中的單位，使用適用的浮點數*解決JS對象。

財產	類型	細節
fontfomily	細繩	在Android中，它與參數傳遞的字符串相同。
字體名稱	細繩	iOS僅在Android中始終`undefined` 。
字體大小	數字	如果參數包括小數，則可能與給定參數有所不同。
fontstyle	細繩	“正常”或“斜體”。
量級	細繩	iOS上的“正常”或“粗體”可以從“ 100”到“ 900”。
fontvariant	細繩 []	iOS僅在Android中始終`undefined` 。
上升	數字	單個間隔文本的基線上方的建議距離。
下降	數字	單個間隔文本基線以下的建議距離。
Capheight	數字	iOS僅資本字符的高度。
Xheight	數字	iOS僅小寫“ x”的高度。
頂部	數字	僅Android 。字體中tallles字形的基線以上的最大距離。
底部	數字	僅Android 。字體中最低字形的基線低於基線的最大距離。
領導	數字	建議在文本行之間添加的添加空間。
LineHeight	數字	建議的線高。如果文本包含Unicode符號，例如表情符號，則應該更大。
_hash	數字	哈希代碼，可能對調試可能很有用。

*使用浮子比整數更準確，並且允許您使用首選舍入方法，但在此值中不超過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中，在Android中，這些寬度， measure和flatHeights的寬度包括領先的空格。

不正確的高度（iOS）

在iOS上，RN將屏幕上的絕對位置納入計算尺寸。 rntextsize不能做到這一點，並且寬度和高度都可以具有高達1像素的差異（不是點）。

信件旁觀不縮放（ios）

RN不支持動態類型的大小，但是在letterSpacing此功能的允許allowFontScaling的情況下做得很好。。。。。。。。。。。。。。。。。。。。。

我希望將來的RN版本能夠解決此問題。

LineHeight支持

儘管rnTextSize提供了總和函數中所得的lineHeight ，但它不支持它作為參數，因為您使用非標準算法來設置它。我建議您不要使用lineHeight ，除非嚴格需要它，但是如果使用它，請嘗試使其比字體尺寸更高30％或更高，或者如果需要更精確的話，請使用RNTextSize fontFromSpecs方法。