React Native组件解析,二之Text

1. 概述

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

1.1 字体相关 Style属性

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

1.2 阴影相关 Style属性

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

1.3 阴影相关 Style属性

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

1.3 阴影相关 Style属性

Style属性名取值说明
onPressfunction点击回调
onLongPressfunction长按回调

具体可查看相关官方APIText