一.Text組件介紹
在 React Native 用于顯示文本的組件就是 Text,專門用來顯示基本的文本信息,處理基本的顯示布局外呜笑,還可以進(jìn)行嵌套顯示,設(shè)置樣式找筝,事件處理(如:點(diǎn)擊事件)
二.Text組件常用的屬性和方法
字體相關(guān)樣式
fontSize fontFamily fontStyle(normal italic) fontWeight(100 - 900 normal bold)
textAlign textDecorationLine(none underline line-through)
adjustsFontSizeToFit:默認(rèn)值為false,為true時(shí)蹈垢,指定字體隨著給定樣式的限制而自動(dòng)縮放
minimumFontScale:當(dāng)adjustsFontSizeToFit開啟時(shí),指定最小的縮放比(即不能低于這個(gè)值)袖裕〔芴В可設(shè)定的值為0.01 - 1.0
allowFontScaling:默認(rèn)值為true.為false時(shí),控制字體是否要根據(jù)iOS的“文本大小”輔助選項(xiàng)來進(jìn)行縮放
suppressHighlighting:默認(rèn)情況下急鳄,文本被按下時(shí)會(huì)有一個(gè)灰色的谤民、橢圓形的高光,當(dāng)為true時(shí)疾宏,如果文本被按下张足,則沒有任何視覺效果。
onLongPress:當(dāng)文本被長按以后調(diào)用此回調(diào)函數(shù)(參考o(jì)nPress)
onLayout:當(dāng)掛載或者布局變化以后調(diào)用(參數(shù)為:{nativeEvent: {layout: {x, y, width, height}}})(參考o(jì)nPress)
onPress:當(dāng)文本發(fā)生點(diǎn)擊的時(shí)候調(diào)用該方法
selectable:布爾類型的屬性坎藐,默認(rèn)值是false为牍。為true時(shí)哼绑,組件中的文字可以被選擇并復(fù)制到手機(jī)系統(tǒng)的剪貼版中
numberOfLines 文本行數(shù)限制,添加后超過限制行數(shù)文本會(huì)在末尾默認(rèn)以...的形式省略碉咆。
ellipsizeMode 設(shè)置文本縮略格式抖韩,配合numberOfLines使用,values:
head:在前面...省略
middle:在中間...省略
tail:在末尾...省略(默認(rèn)值)
clip:在末尾切割疫铜,直接切割字符無省略符
陰影效果
textShadowOffset(width: number, height: number):設(shè)置陰影效果
textShadowRadius 陰影效果圓角(值越大陰影越模糊)
textShadowColor 陰影效果顏色
三.Text組件的嵌套
在 React Native 中是沒有樣式繼承這種說法的茂浮,但對于 Text 元素里邊的 Text 元素,其實(shí)是可以繼承的.
文字控制類的屬性也是多繼承的壳咕,和?CSS?是一樣的,而且會(huì)取與自己最近的屬性歸自己所用席揽,也就是說屬性可覆蓋
四.Text組件的應(yīng)用
1 字符串居中(水平與垂直都居中)顯示在一個(gè)方形區(qū)域
錯(cuò)誤的做法是:導(dǎo)致水平居中,但是垂直不局中谓厘,(justiyContent無效)
正確的做法是:在Text外加一個(gè)包圍的View,把對text的樣式移動(dòng)到view組件里
五.Text組件在兩個(gè)平臺(tái)上的不同表現(xiàn)
當(dāng)開發(fā)者需要實(shí)現(xiàn)帶邊框的Text組件時(shí)幌羞,建議統(tǒng)一使用(View組件包裹Text組件的方法)(否則android平臺(tái)邊框不生效)這種方法
1.只指定fontsize,不指定height
都正常
2只指定height,不指定fontsize
fontsize都為13
3.height== fontsize
ios 略微遮蓋
and:遮蓋明顯
4.height大于fontSize
ios:height=fontsize*1.2 .? 1類似
and:height=fontsize*1.35? 1類似
邊框 ios生效 and不生效 viwe包text 加borderwidth