Text組件簡介

Text組件基本上是任何App都必需要使用的一個組件。一個用于顯示文本的React組件，并且它也支持嵌套、樣式，以及觸摸處理。內層的組件會繼承外層的樣式，并且內存組件的樣式優先級會比外層高。也就是說如果外層組件定義了文本字體為宋體，而內層組件定義的是微軟雅黑，最終顯示出來的是微軟雅黑的字體。

React Native中的Text組件包含了如下幾個常用的屬性。

| 屬性/方法名稱 | 類型 | 說明 |
| --- | --- | --- |
|adjustsFontSizeToFit |bool| 指定字體是否跟隨指定樣式的限制而自動縮放。|
|allowFontScaling| bool|控制字體是否根據系統的“字體大小”輔助選項來進行縮放|
|minimumFontScale| bool|當adjustsFontSizeToFit開啟時，指定最小的縮放比，即不能低于該值，可設定的值為0.01 - 1.0|
|numberOfLines| number|當文本過長的時裁剪文本，包括折疊產生的換行在內，總的行數不會超過這個屬性的限制。|
|onLayout| function|當掛載或者布局變化后調用此回調函數。|
|onLongPress| function|當文本被長按以后調用此回調函數。|
|onPress| function|當文本被點擊以后調用此回調函數。|
|selectable| function|是否允許用戶長按選擇文本，以便復制和粘貼。|
|suppressHighlighting| bool|當值為true時，如果文本被按下，則沒有任何視覺效果。默認情況下，文本被按下時會有一個灰色的、橢圓形的高光效果。|

Text組件使用示例

下方的示例代碼中，我們使用Text組件顯示若干行文字，并對顯示文字的樣式進行了設置。

• 在終端中執行如下命令，創建名稱為TextDemo的工程

react-native init TextDemo

• 使用Atom打開TextDemo工程的index.ios.js文件，編寫Text組件所使用的樣式

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
    flex: 1,
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

• 在默認的TextDemo組件中，添加Text組件。在下方的代碼中，我們對Text組件的樣式進行了設置，并且對Text組件進行了嵌套操作。

export default class TextDemo extends Component {
  render() {
    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText}>
          {'\n Hello 99iOS'}
        </Text>
        <Text numberOfLines={3}>
          {"\n 歡迎訪問\n 九九學院\n www.mlyel.cn"}
        </Text>
    </Text>
    );
  }
}

• 使用import加載項目所使用的模塊，并且注冊組件TextDemo成為整個應用的根容器

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
} from 'react-native';

AppRegistry.registerComponent('TextDemo', () => TextDemo);

• 在終端中執行下面的命令運行程序，在iOS模擬器中可以看到顯示的文字信息以及文字的樣式。

react-native run-ios

注意事項

Text元素在布局上不同于其它組件：在Text內部的元素不再使用Flexbox布局，而是采用文本布局。Text內部的元素不再是一個個‘盒子’，而可能會在行末進行折疊。所以如果對Text組件style設置flexDirection: 'column'是無效的。

為了驗證Text組件的布局特性，下面的測試代碼中，Text組件里面的所有子Text組件都會按順序排列，看上去就像一個Text組件。

export default class TextDemo extends Component {
  render() {
    return (
      <Text>
      <Text style={styles.titleText}>
       {'\n Hello'}
      </Text>
      <Text style={styles.titleText}>
       {' 99iOS'}
      </Text>
      </Text>
    );
  }
}

另外，我們把所有子Text組件裝入一個View組件中，此時每一個Text組件都是一個“盒子”。

export default class TextDemo extends Component {
  render() {
    return (
      <View>
      <Text style={styles.titleText}>
       {'\n Hello'}
      </Text>
      <Text style={styles.titleText}>
       {' 99iOS'}
      </Text>
      </View>
    );
  }
}

---