前言
學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)滥比，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)
本人接觸 React Native 時間并不是特別長乌助，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差昼牛，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容旬盯，也歡迎萬能的朋友們批評指出溶弟，謝謝
文章第一版出自簡書绽榛，如果出現(xiàn)圖片或頁面顯示問題，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點(diǎn)贊胳徽，謝謝
Text 組件介紹
- 在 React Native 用于顯示文本的組件就是 Text积锅，和iOS中的 UIlabel爽彤，Android中的 TextView類似，專門用來顯示基本的文本信息缚陷，處理基本的顯示布局外适篙，還可以進(jìn)行嵌套顯示，設(shè)置樣式箫爷，已經(jīng)事件處理（如：點(diǎn)擊事件）
Text 組件常用的屬性和方法
-
color：字體顏色
// 字體顏色 color:'blue'效果：
-
numberOfLines：設(shè)置 Text 顯示文本的行數(shù)嚷节，如果顯示的內(nèi)容超過行數(shù)，默認(rèn)其余的文本信息不再顯示
render() { return ( <View style={styles.container}> <Text style={styles.textStyle} numberOfLines={3}>雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest</Text> </View> ); }效果：
設(shè)置行數(shù) -
fontSize：字體大小
// 字體大小 fontSize:30效果：
文字大小 -
fontFamily：字體名稱
// 字體類型 fontFamily:'Georgia'效果：
字體類型 -
fontStyle（'normal', 'italic'）：字體風(fēng)格
// 字體風(fēng)格 fontStyle:'italic'效果：
字體風(fēng)格 -
fontWeight（'normal', 'bold', '100 ~ 900'）：指定字體的粗細(xì)虎锚。大多數(shù)字體都支持'normal'和'bold'值硫痰。并非所有字體都支持所有的數(shù)字值。如果某個值不支持窜护，則會自動選擇最接近的值
// 字體粗細(xì) fontWeight:('bold', '700')效果：
字體粗細(xì) textShadowOffset（width: number, height: number）：設(shè)置陰影效果
-
textShadowColor：陰影效果顏色
// 陰影 textShadowOffset:{width:3, height:5}, // 陰影顏色 textShadowColor:'black'效果：
陰影效果和陰影顏色 -
textShadowRadius：陰影效果圓角（值越大陰影越模糊）
// 陰影圓角 textShadowRadius:3效果：
陰影圓角 -
letterSpacing：字符間距
// 字符間距 letterSpacing:5效果：
字符間距 -
lineHeight：行高
// 行高 lineHeight:25效果：
行高 -
textAlign（'auto', 'left', 'right', 'center', 'justify'）：文本對齊方式
- auto
// 文本對齊方式 textAlign:'auto'效果：
auto- left
// 文本對齊方式 textAlign:'left'效果：
left- right
// 文本對齊方式 textAlign:'right'效果：
right- center
// 文本對齊方式 textAlign:'center'效果：
center- justify
// 文本對齊方式 textAlign:'justify'效果：
justify - auto
-
textDecorationLine（'none', 'underline', 'line-through'）：橫線位置
- none：沒有橫線
- underline：
// 橫線 textDecorationLine:'underline'效果：
underline- line-through:
// 橫線 textDecorationLine:'line-through'效果：
line-through -
textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：線風(fēng)格
- solid
// 橫線風(fēng)格 textDecorationStyle:'solid'效果：
solid- double
// 橫線風(fēng)格 textDecorationStyle:'double'效果：
double- dotted
// 橫線風(fēng)格 textDecorationStyle:'dotted'效果：
dotted- dashed
// 橫線風(fēng)格 textDecorationStyle:'dashed'效果：
dashed - solid
-
textDecorationColor：線的顏色
// 線的顏色 textDecorationColor:'black',效果：
線的顏色 allowFontScaling：控制字體是否要根據(jù)iOS的“文本大小”輔助選項(xiàng)來進(jìn)行縮放
adjustsFontSizeToFit：指定字體是否隨著給定樣式的限制而自動縮放
minimumFontScale：當(dāng)adjustsFontSizeToFit開啟時效斑，指定最小的縮放比（即不能低于這個值）≈悖可設(shè)定的值為0.01 - 1.0
suppressHighlighting：當(dāng)為true時缓屠，如果文本被按下，則沒有任何視覺效果护侮。默認(rèn)情況下敌完，文本被按下時會有一個灰色的、橢圓形的高光
-
selectable：決定用戶是否可以長按選擇文本羊初，以便復(fù)制和粘貼
render() { return ( <View style={styles.container}> <Text style={styles.textStyle} selectable={true} > 雨澤Forest </Text> </View> ); }效果：
selectable.gif testID：用來在端到端測試中標(biāo)記這個視圖
-
onPress：當(dāng)文本發(fā)生點(diǎn)擊的時候調(diào)用該方法
render() { return ( <View style={styles.container}> <Text style={styles.textStyle} onPress={()=>{alert('點(diǎn)擊')}} > 雨澤Forest </Text> </View> ); }效果：
onPress.gif 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)
Text 使用
-
視圖部分
render() { return ( <View style={styles.container}> <Text style={styles.textStyle}>雨澤Forest</Text> </View> ); } -
樣式部分
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'green', }, textStyle: { // 背景色 backgroundColor:'yellow', // 字體大小 fontSize:30, // 下劃橫線 textDecorationLine:'underline' } });效果：
Text 組件的嵌套使用
-
視圖部分
var test = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.textStyle} numberOfLines={3}> 雨澤 <Text style={{color:'orange'}}> Forest </Text> </Text> </View> ); } }); -
樣式部分
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'green', }, textStyle: { // 字體顏色 color:'blue', // 字體大小 fontSize:30 } });效果：
嵌套使用
Text 組件中樣式的繼承
-
在 React Native 中是沒有樣式繼承這種說法的蠢挡，但對于 Text 元素里邊的 Text 元素，其實(shí)是可以繼承的凳忙，至于是單繼承還是多繼承业踏，我們可以來試驗(yàn)一下
- 視圖部分
var test = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.textStyle} numberOfLines={3}> <Text> <Text>雨澤Forest</Text> </Text> </Text> </View> ); } });- 樣式部分
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'green', }, textStyle: { // 字體顏色 color:'blue', // 字體大小 fontSize:30 } });效果：
樣式繼承關(guān)系 - 視圖部分
通過試驗(yàn)我們可以看出，文字控制類的屬性也是
多繼承的涧卵，和CSS是一樣的,而且會取與自己最近的屬性歸自己所用勤家，也就是說屬性可覆蓋
