一穆咐、什么是Text組件?
一個(gè)用于顯示文本的React組件掂名,和Android中的TextView組件或者OC中的Label組件相類似,專門用來(lái)顯示基本的文本信息哟沫;除了基本的顯示布局之外饺蔑,可以進(jìn)行嵌套顯示,設(shè)置樣式嗜诀,以及可以做事件(例如:點(diǎn)擊)處理猾警;
二、Text組件常用的屬性方法
Attributes.style = {
color string
containerBackgroundColor string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight number
textAlign enum("auto", 'left', 'right', 'center')
writingDirection enum("auto", 'ltr', 'rtl')
numberOfLines number
textAlign ("auto", 'left', 'right', 'center', 'justify')
fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
onPress fcuntion
}
注釋如下:
`color` 字體顏色
`numberOfLines` (number) 進(jìn)行設(shè)置Text顯示文本的行數(shù)隆敢,如果顯示的內(nèi)容超過(guò)了行數(shù)发皿,默認(rèn)其他多余的信息就不會(huì)顯示了
`onPress` (fcuntion) 該方法當(dāng)文本發(fā)生點(diǎn)擊的時(shí)候調(diào)用該方法
`color` 字體顏色
`fontFamily` 字體名稱
`fontSize` 字體大小
`fontStyle` 字體風(fēng)格(normal,italic)
`fontWeight ` 字體粗細(xì)權(quán)重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
`textShadowOffset` 設(shè)置陰影效果{width: number, height: number}
`textShadowRadius` 陰影效果圓角
`textShadowColor` 陰影效果的顏色
`letterSpacing` 字符間距
`lineHeight` 行高
`textAlign` 文本對(duì)其方式("auto", 'left', 'right', 'center', 'justify')
`textDecorationLine` 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
`textDecorationStyle` 線的風(fēng)格("solid", 'double', 'dotted', 'dashed')
`textDecorationColor` 線的顏色
`writingDirection` 文本方向("auto", 'ltr', 'rtl')
三、Text組件中常用屬性的應(yīng)用
圖片 1.png
運(yùn)行結(jié)果如下:
圖片 2.png
三拂蝎、Text組件中樣式的繼承
在React-native中是沒有樣式繼承這種說(shuō)法的穴墅, 但是對(duì)于Text元素里邊的Text元素,其實(shí)是能夠繼承的温自,那么是單層繼承還是多層繼承玄货?
代碼演示:
圖片 3.png
運(yùn)行結(jié)果:
圖片 4.png
結(jié)論:文字控制類的屬性也是多重繼承的,和css中是一樣的