React-Native中Text

阙繁
2023-12-01

刚开始学习RN,有错误或者不足之处希望多多指出,万分感谢

Text相关样式属性

fontFamily:用来指定Text组件以何种字体族显示,取值有:sans-serif、serif、monospace、sans-serif-light、sans-serif-thin、sans-serif-condensed、sans-serif-medium。

monospace是一种宽字体种类

serif在字的笔画开始及结束的地方有额外的装饰,笔画的粗细会因直横的不同而不同,而sans-serif没有额外的装饰,笔画的粗细大致相同。

fontStyle:字体的风格。normal:正常体。italic:斜体

fontWeight:字的粗细。normal、bold(粗体)、100、200、...、800、900;100-900代表的是从最细(100)到最粗(900)

textAlign:字符串排列位置。auto(根据字符语言自动排列,如英语将从左向右,阿拉伯语从右向左排列)、left、right、center、justify(只针对ios平台有效,在Android等价于left)

textDecorationLine:下划线装饰。none(没有装饰线)、underline(下划线)、line-through(删除线)、underline line-through(下划线+删除线)

lineHeight:行高

以下三个属性与阴影效果相关,textShadowOffset:阴影效果偏移量textShadowRadius:阴影半径textShadowColor:阴影颜色

letterSpacing:指定字符串的每个字符之间插入多少空间

ellipsizeMode:当Text组件无法全部显示字符串时省略号的形式,需要与numberOfLines同时使用。

  • head:从文本的开头进行截断,并在文本的开头添加省略号,例如:…xyz。
  • middle :从文本的中间进行截断,并在文本的中间添加省略号,例如:ab…yz。
  • tail:从文本的末尾进行截断,并在文本的末尾添加省略号,例如:abcd…。
  • clip :文本的末尾显示不下的内容会被截断,并且不添加省略号,clip只适用于iOS平台。

numberOfLines:字符串可以显示的行数,如不设置则无行数限制。

selectable:默认值为false,设为true时,字符串组件的文字可以被选中并复制。使用方法:selectable={true}

Text组件的嵌套

在嵌套的Text组件中,子Text组件将继承父Text组件的样式,并且只能添加父Text组件没有指定的样式,不能覆盖父Text组件的样式。如果试图在代码中覆盖父Text组件继承来的样式,覆盖将不会生效。Ps:嵌套Text组件的显示字符串中,需要另起一行需要在字符串前添加{'\r\n'},否则将接着上一行继续显示

在字符串中添加图片:可以直接在Text组件字符串中添加Image标签。




 类似资料: