React Native组件解析(二)之Text

React Native组件解析(二)之Text

1. 概述

Text组件对应于iOS的UILabel,Android的TextView,用来显示文本。但是Text组件的内部使用的并不是flexbox布局,而是文本布局,所以如果想要使文字居中,需要在Text组件的外层套一层View,设置View的flexbox

1.1 字体相关 Style属性

Style属性名 取值 说明
fontFamily enum('sans-serif', 'serif','monospace','sans-serif-light','sans-serif-thin','sans-serif-condensed','sans-serif-medium') 英文字符串的样式
fontSize number 字体大小
fontStyle enum('normal', 'italic') 字体风格是普通还是斜体
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') 字体粗细程度

1.2 阴影相关 Style属性

Style属性名 取值 说明
textShadowColor color 阴影颜色
textShadowOffset {width: number, height: number} 阴影效果
textShadowRadius number 阴影圆角

1.3 阴影相关 Style属性

Style属性名 取值 说明
textAlign enum('auto', 'left', 'right', 'center', 'justify') 对齐方式
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through') 横线相关设置
lineHeight number 行高
numberOfLines number 行数,同iOS,0:不限制行数
adjustsFontSizeToFit bool 默认值为false,为true时字体会自动缩小,以适应给定的样式约束
minimumFontScale number 为true时,设置字体的最小缩放比例,取值范围为0.01~1.0

1.3 阴影相关 Style属性

Style属性名 取值 说明
onPress function 点击回调
onLongPress function 长按回调

具体可查看相关官方APIText

猜你喜欢

转载自www.cnblogs.com/fengtengfei/p/9854231.html