組件Text用于顯示文本
<Text>hello text</Text> //顯示hello text
不可以使用其他組件直接直接將文本作為子節(jié)點(diǎn)
<View>文本<View> //錯(cuò)誤
嵌套
Text組件可以嵌套
<Text>
this is a <Text>special</Text> text
</Text>
嵌套組件樣式可以繼承时迫，就近原則，
<Text style={{color:'#333', padding:10}}>
this is a
<Text style={{color:'red'}}> special </Text>
Text
</Text>
每個(gè)Text組件會(huì)從新一行起（類似塊級(jí)元素）谓晌，而子組件不可換行（類似行內(nèi)元素）掠拳，子組件字體，顏色可設(shè)置纸肉，寬高溺欧，margin喊熟，padding設(shè)置無效。
對(duì)于常用樣式可以創(chuàng)建可復(fù)用組件
<Text style={{color:'#333', padding:10}}>this is a
<Strong style={{color:'red'}}> special </Strong>
Text
</Text>
var styles = StyleSheet.create({
bold: {
fontWeight: "bold"
}
});
var Strong = React.createClass({
render: function() {
return (
<Text style={[styles.bold, this.props.style]}>
{this.props.children}</Text>
);
}
});
屬性
| 名稱 | 作用 | 值 | 限制 |
|---|---|---|---|
| adjustsFontSizeToFit | 指定字體是否隨著給定樣式的限制而自動(dòng)縮放姐刁。 | bool | |
| allowFontScaling | 控制字體是否要根據(jù)系統(tǒng)的“字體大小”輔助選項(xiàng)來進(jìn)行縮放芥牌。 | bool | |
| minimumFontScale | 當(dāng)adjustsFontSizeToFit開啟時(shí)，指定最小的縮放比（即不能低于這個(gè)值）聂使。 | 可設(shè)定的值為0.01 - 1.0 | ios |
| numberOfLines | 用來當(dāng)文本過長的時(shí)候裁剪文本壁拉。包括折疊產(chǎn)生的換行在內(nèi)，總的行數(shù)不會(huì)超過這個(gè)屬性的限制柏靶。會(huì)以“...”來顯示 | number, 1,2,3.... | |
| onLayout | 當(dāng)掛載或者布局變化以后調(diào)用弃理，參數(shù)為如下的內(nèi)容：{nativeEvent: {layout: {x, y, width, height}}} | function | |
| onLongPress | 當(dāng)文本被長按以后調(diào)用此回調(diào)函數(shù)。 | function | |
| onPress | 當(dāng)文本被點(diǎn)擊以后調(diào)用此回調(diào)函數(shù)宿礁。 | function | |
| selectable | 決定用戶是否可以長按選擇文本案铺，以便復(fù)制和粘貼。 | function | |
| testID | 用來在端到端測試中標(biāo)記這個(gè)視圖梆靖。 | string | |
| suppressHighlighting | 當(dāng)為true時(shí)，如果文本被按下笔诵，則沒有任何視覺效果返吻。默認(rèn)情況下，文本被按下時(shí)會(huì)有一個(gè)灰色的乎婿、橢圓形的高光测僵。 | bool | ios |
style
| 名稱 | 作用 | 值 | 限制 |
|---|---|---|---|
| color | 顏色 | '#333','red' | |
| fontFamily | 字體 | string字體名稱 | |
| fontSize | 字體大小 | number ,13 | |
| fontStyle | 字體風(fēng)格 | enum('normal', 'italic') | |
| fontWeight | 指定字體的粗細(xì)。 | 大多數(shù)字體都支持'normal'和'bold'值谢翎。并非所有字體都支持所有的數(shù)字值捍靠。如果某個(gè)值不支持，則會(huì)自動(dòng)選擇最接近的值森逮。enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | |
| lineHeight | 行高 | number | |
| textAlign | 指定文本的對(duì)齊方式 | enum('auto', 'left', 'right', 'center', 'justify')榨婆，其中'justify'值僅iOS支持，在Android上會(huì)變?yōu)閘eft | |
| textDecorationLine | 橫線位置 | enum('none', 'underline', 'line-through', 'underline line-through') | |
| textShadowColor | 陰影效果顏色 | 顏色值 | |
| textShadowOffset | 設(shè)置陰影效果 | {width: number, height: number} | |
| textShadowRadius | 陰影效果圓角 | number | |
| includeFontPadding | Android在默認(rèn)情況下會(huì)為文字額外保留一些padding褒侧，以便留出空間擺放上標(biāo)或是下標(biāo)的文字良风。對(duì)于某些字體來說，這些額外的padding可能會(huì)導(dǎo)致文字難以垂直居中闷供。如果你把textAlignVertical設(shè)置為center之后烟央，文字看起來依然不在正中間，那么可以嘗試將本屬性設(shè)置為false. | bool | android |
| textAlignVertical | 文本垂直對(duì)齊方式 | enum('auto', 'top', 'bottom', 'center') | android |
| fontVariant | 字體的異體 | [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')] | ios |
| letterSpacing | 字符間距 | number | ios |
| textDecorationColor | 文本裝飾線條的顏色 | 顏色值 | ios |
| textDecorationStyle | 文本裝飾線條的形狀 | enum('solid', 'double', 'dotted', 'dashed') | ios |
| writingDirection | 文本方向 | enum('auto', 'ltr', 'rtl') | ios |
參考：Text
