React Native常用組件之Text

一、什么是Text組件?

   一個用于顯示文本的React組件,和Android中的TextView組件或者OC中的Label組件相類似,專門用來顯示基本的文本信息;除了基本的顯示布局之外,可以進行嵌套顯示,設(shè)置樣式,以及可以做事件(例如:點擊)處理;

二、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) 進行設(shè)置Text顯示文本的行數(shù),如果顯示的內(nèi)容超過了行數(shù),默認其他多余的信息就不會顯示了
`onPress` (fcuntion)  該方法當(dāng)文本發(fā)生點擊的時候調(diào)用該方法
 `color`  字體顏色
`fontFamily`  字體名稱
`fontSize`  字體大小
`fontStyle`   字體風(fēng)格(normal,italic)
`fontWeight ` 字體粗細權(quán)重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
`textShadowOffset`  設(shè)置陰影效果{width: number, height: number}
`textShadowRadius`  陰影效果圓角
`textShadowColor`  陰影效果的顏色
`letterSpacing`  字符間距
`lineHeight`  行高
`textAlign`   文本對其方式("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

運行結(jié)果如下:

圖片 2.png

三、Text組件中樣式的繼承
在React-native中是沒有樣式繼承這種說法的, 但是對于Text元素里邊的Text元素,其實是能夠繼承的,那么是單層繼承還是多層繼承?
代碼演示:

圖片 3.png

運行結(jié)果:

圖片 4.png

結(jié)論:文字控制類的屬性也是多重繼承的,和css中是一樣的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容