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 。目前，没有样式包括此属性。
信件	数字	如果在RN低于0.55的Android上运行，则省略

要了解关键名称，请参阅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方法。