React Native组件解析(二)之Text

2024-08-29 10:12:25

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

最新文章

热门文章