React Native 之 Text的使用

前言

• 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習

• 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝

• 文章第一版出自簡書，如果出現圖片或頁面顯示問題，煩請轉至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝

Text 組件介紹

• 在 React Native 用於顯示文本的組件就是 Text，和iOS中的 UIlabel，Android中的 TextView類似，專門用來顯示基本的文本信息，處理基本的顯示佈局外，還可以進行嵌套顯示，設置樣式，已經事件處理（如：點擊事件）

Text 組件常用的屬性和方法

• color：字體顏色

      // 字體顏色
      color:'blue'
  

  效果：

• numberOfLines：設置 Text 顯示文本的行數，如果顯示的內容超過行數，預設其餘的文本信息不再顯示

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle} numberOfLines={3}>雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest</Text>
              </View>
          );
      }
  

  效果：
  

• fontSize：字體大小

      // 字體大小
      fontSize:30
  

  效果：
  

• fontFamily：字體名稱

      // 字體類型
      fontFamily:'Georgia'
  

  效果：
  

• fontStyle（'normal', 'italic'）：字體風格

      // 字體風格
      fontStyle:'italic'
  

  效果：
  

• fontWeight（'normal', 'bold', '100 ~ 900'）：指定字體的粗細。大多數字體都支持'normal'和'bold'值。並非所有字體都支持所有的數字值。如果某個值不支持，則會自動選擇最接近的值

      // 字體粗細
      fontWeight:('bold', '700')
  

  效果：
  

• textShadowOffset（width: number, height: number）：設置陰影效果

• 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'
  

  效果：
  
  • left
    
    
    

      // 文本對齊方式
      textAlign:'left'
  

  效果：
  
  • right
    
    
    

      // 文本對齊方式
      textAlign:'right'
  

  效果：
  
  • center
    
    
    

      // 文本對齊方式
      textAlign:'center'
  

  效果：
  
  • justify
    
    
    

      // 文本對齊方式
      textAlign:'justify'

  效果：
  
• textDecorationLine（'none', 'underline', 'line-through'）：橫線位置
  • none：沒有橫線
  • underline：
    
    
    

      // 橫線
      textDecorationLine:'underline'
  

  效果：
  
  • line-through:
    
    
    

      // 橫線
      textDecorationLine:'line-through'
  

  效果：
  
• textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：線風格
  • solid
    
    
    

      // 橫線風格
      textDecorationStyle:'solid'
  

  效果：
  
  • double
    
    
    

      // 橫線風格
      textDecorationStyle:'double'
  

  效果：
  
  • dotted
    
    
    

      // 橫線風格
      textDecorationStyle:'dotted'
  

  效果：
  
  • dashed
    
    
    

      // 橫線風格
      textDecorationStyle:'dashed'
  

  效果：
  

• textDecorationColor：線的顏色

      // 線的顏色
      textDecorationColor:'black',
  

  效果：
  

• allowFontScaling：控制字體是否要根據iOS的“文本大小”輔助選項來進行縮放

• adjustsFontSizeToFit：指定字體是否隨著給定樣式的限制而自動縮放

• minimumFontScale：當adjustsFontSizeToFit開啟時，指定最小的縮放比（即不能低於這個值）。可設定的值為0.01 - 1.0

• suppressHighlighting：當為true時，如果文本被按下，則沒有任何視覺效果。預設情況下，文本被按下時會有一個灰色的、橢圓形的高光

• selectable：決定用戶是否可以長按選擇文本，以便複製和粘貼

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle}
                      selectable={true}
                  >
                      雨澤Forest
                  </Text>
              </View>
          );
      }
  

  效果：
  

• testID：用來在端到端測試中標記這個視圖

• onPress：當文本發生點擊的時候調用該方法

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle}
                      onPress={()=>{alert('點擊')}}
                  >
                      雨澤Forest
                  </Text>
              </View>
          );
      }
  

  效果：
  

• onLongPress：當文本被長按以後調用此回調函數（參考onPress）

• onLayout：當掛載或者佈局變化以後調用（參數為：{nativeEvent: {layout: {x, y, width, height}}}）(參考onPress)

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 元素，其實是可以繼承的，至於是單繼承還是多繼承，我們可以來試驗一下
  • 視圖部分
    
    
    

      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
          }
  
      });
  

  效果：
  
• 通過試驗我們可以看出，文字控制類的屬性也是多繼承的，和 CSS 是一樣的,而且會取與自己最近的屬性歸自己所用，也就是說屬性可覆蓋

很多朋友私信我說更新太慢，在這裡說聲抱歉，因為接近春節，公司事情比較多，還請朋友們見諒，喜歡我的文章的可以點點關註，有什麼不清楚或者建議可以評論或留言，謝謝！