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