用于显示文本的React组件,与OC中的Label组件和Android中的TextView组件相类似。
一、Text组件常用的属性方法
(一)property
color 字体颜色
numberOfLines (number) 进行设置Text显示文本的行数,如果显示的内容超过了行数,默认其他多余的信息就不会显示了
fontFamily 字体名称
fontSize 字体大小
fontStyle 字体风格(normal,italic)
fontWeight 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
textShadowOffset 设置阴影效果{width: number, height: number}
textShadowRadius 阴影效果圆角
textShadowColor 阴影效果的颜色
letterSpacing 字符间距
lineHeight 行高
textAlign 文本对其方式("auto", 'left', 'right', 'center', 'justify')
textAlignVertical enum('auto', 'top', 'bottom', 'center') android
includeFontPadding bool android
(Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为false.)
fontVariant [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')] ios
textDecorationLine 横线位置 ("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle 线的风格("solid", 'double', 'dotted', 'dashed')
textDecorationColor线的颜色
writingDirection 文本方向("auto", 'ltr', 'rtl')
adjustsFontSizeToFit bool 指定字体是否随着给定样式的限制而自动缩放。
allowFontScaling bool 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。
minimumFontScale bool 当adjustsFontSizeToFit开启时,指定最小的缩放比(即不能低于这个值)。可设定的值为0.01 - 1.0 ios
(二)function
onPress (function) 该方法当文本发生点击的时候调用该方法
onLongPress function 当文本被长按以后调用此回调函数。
二、Text组件中常用属性的应用
textStyle:{
backgroundColor:'red',
color:'yellow',
textAlign:'left',
width:300,
lineHeight:30,
fontSize:18,
fontWeight:'bold',
letterSpacing:5, // 缩进
textDecorationLine:'underline',
textDecorationColor:'green',
textDecorationStyle:'double'
}
三、Text组件中嵌套
<Text>
<Text
style={styles.textStyle}
numberOfLines={3} // 设置总行数
>
Hello World
</Text>
</Text>