一、什么是Text組件？

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

二、Text組件常用的屬性方法

   （1） color string  ** 字體顏色
   （2）containerBackgroundColor string
   （3）fontFamily string  ** 字體名稱
   （4）fontSize number  ** 字體大小
   （5）fontStyle enum('normal', 'italic')  ** 字體風格(normal,italic) 斜體只適用于英文
   （6）fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') ** 字體粗細權重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
   （7） lineHeight number  ** 行高
   （8）textAlign enum("auto", 'left', 'right', 'center')  ** 文本對其方式("auto", 'left', 'right', 'center', 'justify')
   （9）writingDirection enum("auto", 'ltr', 'rtl')  **  文本方向("auto", 'ltr', 'rtl')
   （10）numberOfLines number  ** 進行設置Text顯示文本的行數，如果顯示的內容超過了行數，默認其他多余的信息就不會顯示了 (RN中不可用)
   （11）onPress  fcuntion  ** 該方法當文本發生點擊的時候調用該方法
   （12）textShadowOffset   ** 設置陰影效果{width: number, height: number}
   （13）textShadowRadius  ** 陰影效果圓角
   （14）textShadowColor  ** 陰影效果的顏色
   （15）letterSpacing  ** 字符間距
   （16）textDecorationLine  ** 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
   （17）textDecorationStyle ** 線的風格("solid", 'double', 'dotted', 'dashed')
   （18）textDecorationColor ** 線的顏色

三、Text組件中常用屬性的應用

export default class AHelloProject extends Component {
  render() {
    return (
      <View style={{marginTop: 50}}>
        <Text style={styles.textStyle}>
          這是Text組件常用屬性的應用示例,{'\n'}
          <Text style={{backgroundColor: 'green',color: 'purple'}}>
            我是繼承的Text
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textStyle: {
    color: 'red',
    backgroundColor: 'blue',
    fontFamily: 'Times',
    fontSize: 25,
    fontStyle: 'italic',
    fontWeight: 'bold',
    lineHeight: 40,
    textAlign: 'center',
    writingDirection: 'rtl',
    letterSpacing: 5,
    textDecorationLine: 'underline line-through',
    textDecorationStyle: 'solid',
    textDecorationColor: 'yellow',
    textShadowOffset: {width: 10, height: 10},
    textShadowRadius: 5,
    textShadowColor: 'black'
  },

});

效果圖.png

四、Text組件中樣式的繼承

在React-native中是沒有樣式繼承這種說法的， 但是對于Text元素里邊的Text元素，其實是能夠繼承的，那么是單層繼承還是多層繼承？

由上邊的例子可以看出：<strong>文字控制類的屬性也是多重繼承的，和css中是一樣的</strong>