一郎哭、Text組件是什么?
一個用于顯示文本的React組件,和iOS中的UILabel控件相似菇存,用來專門顯示基本的文本信息夸研。并且它也支持嵌套、樣式依鸥,以及觸摸處理亥至。
二、Text組件常用的屬性方法
allowFontScaling ? bool 是否根據(jù)‘文本大小’進行縮放
numberOfLines? number? 用來當(dāng)文本過長的時候裁剪文本
用來當(dāng)文本過長的時候裁剪文本。包括折疊產(chǎn)生的換行在內(nèi)姐扮,總的行數(shù)不會超過這個屬性的限制絮供。
color ? s ring ? ? 字體顏色
containerBackgroundColor ?string ? ?背景色
fontFamily string ? ?字體名稱
fontSize number ? ?字體大小
fontStyle enum('normal','italic') ? ?字體風(fēng)格
fontWeight enum("normal",'bold','100','200','300','400','500','600','700','800','900') ? ?字體粗細(xì)
lineHeight number ? ?行高
textAlign ? enum("auto",'left','right','center') ? ?文字居中方式
writingDirection enum("auto",'ltr','rtl') ?文字方向
`textShadowOffset`設(shè)置陰影效果{width: number, height: number}
`textShadowRadius` ?陰影效果圓角
`textShadowColor` ?陰影效果的顏色
`textDecorationLine`? 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
`textDecorationStyle` 線的風(fēng)格("solid", 'double', 'dotted', 'dashed')
`textDecorationColor` 線的顏色
`letterSpacing` ?字符間距
onPress ? fcuntion 函數(shù) ?當(dāng)文本被點擊以后調(diào)用此回調(diào)函數(shù)
當(dāng)掛載或者布局變化以后調(diào)用,參數(shù)為如下的內(nèi)容:
{nativeEvent: {layout: {x, y, width, height}}}
當(dāng)為true時茶敏,如果文本被按下壤靶,則沒有任何視覺效果。默認(rèn)情況下惊搏,文本被按下時會有一個灰色的贮乳、橢圓形的高光。
三恬惯、Text的布局方式
元素在布局上不同于其它組件:在Text內(nèi)部的元素不再使用flexbox布局塘揣,而是采用文本布局。這意味著內(nèi)部的元素不再是一個個矩形宿崭,而可能會在行末進行折疊亲铡。
樣式應(yīng)用
運行結(jié)果:
三、Text樣式的繼承復(fù)用問題
3.1.復(fù)用問題
在React Native中葡兑,你必須把你的文本節(jié)點放在組件內(nèi)奖蔓。你不能直接在下放置一段文本。并且你也不能直接設(shè)置一整顆子樹的默認(rèn)樣式讹堤。使用一個一致的文本和尺寸的推薦方式是創(chuàng)建一個包含相關(guān)樣式的組MyAppText吆鹤,然后在你的App中反復(fù)使用它。你還可以創(chuàng)建更多特殊的組件譬如MyAppHeaderText來表達不同樣式的文本洲守。
3.2繼承問題
React Native實際上還是有一部分樣式繼承的實現(xiàn)疑务,:文字控制類的屬性也是多重繼承的,和css中是一樣的梗醇。
運行結(jié)果: