嵌套文本

"I am bold and red"
0-9: bold
9-17: bold, red

嵌套視圖（僅限iOS）

要使用此功能，必須為視圖指定寬度和高度。

Containers

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: all the text flows as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part |
// |and        |
// |second part|

有限式傳承

html {
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  color: #141823;
}

// BAD: will raise exception, can't have a text node as child of a <View>
<View>
  Some text
</View>

// GOOD
<View>
  <Text>
    Some text
  </Text>
</View>

<View>
  <MyAppText>
    Text styled with the default font for the entire application
  </MyAppText>
  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

class MyAppHeaderText extends Component {
  render() {
    return (
      <MyAppText>
        <Text style={{fontSize: 20}}>{this.props.children}</Text>
      </MyAppText>
    );
  }
}

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>and red</Text>
</Text>

• （開發人員）React組件在設計時考慮到了強烈的隔離：您應該能夠將組件放在應用程序的任何位置，相信只要道具相同，它的外觀和行為就會一樣。可以從道具外部繼承的文本屬性會破壞這種隔離。
• （實現者）React Native的實現也得到了簡化。我們不需要在每個元素上都有一個fontFamily字段，每次顯示文本節點時，我們都不需要將樹遍歷到根目錄。樣式繼承僅在本機Text組件內編碼，不會洩漏到其他組件或系統本身。

Props

• selectable
• accessible
• ellipsizeMode
• nativeID
• numberOfLines
• onLayout
• onLongPress
• onPress
• pressRetentionOffset
• allowFontScaling
• style
• testID
• disabled
• selectionColor
• textBreakStrategy
• adjustsFontSizeToFit
• minimumFontScale
• suppressHighlighting

參考

Props

selectable

accessible

ellipsizeMode

• head - 顯示行以使末尾適合容器，並且行開頭的缺失文本由省略號字符表示。例如，“... wxyz”
• middle - 顯示該行，使得開頭和結尾適合容器，中間缺少的文本由省略號字符表示。 “AB ... YZ”
• tail - 顯示該行，使得開頭適合容器，行末尾的缺失文本由省略號字形表示。例如，“abcd ......”
• clip - 不會在文本容器的邊緣之外繪製線條。

nativeID

numberOfLines

onLayout

onLongPress

onPress

pressRetentionOffset

allowFontScaling

style

• View Style Props...
• textShadowOffset: object: {width: number,height: number}
• color: color
• fontSize: number
• fontStyle: enum('normal', 'italic')
• fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
  指定字體粗細。大多數字體都支持“正常”和“粗體”值。並非所有字體都具有每個數值的變體，在這種情況下，選擇最接近的字體。
• lineHeight: number
• textAlign: enum('auto', 'left', 'right', 'center', 'justify')
  指定文本對齊。值 'justify' 僅在iOS上支持，在 Android 上支持不支援。
• textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')
• textShadowColor: color
• fontFamily: string
• textShadowRadius: number
• includeFontPadding: bool (Android)
  設置為false以刪除旨在為某些上升/下降器騰出空間的額外字體填充。對於某些字體，此填充可以使文本在垂直居中時看起來略微錯位。為獲得最佳效果，還將 textAlignVertical 設置為 center。默認為true。

• textAlignVertical: enum('auto', 'top', 'bottom', 'center') (Android)
• fontVariant: array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') (iOS)
• letterSpacing: number
  增加或減少字符之間的間距。默認值為0，表示沒有額外的字母間距。
  
  iOS：每個字形後將呈現額外的空間。
  
  Android：僅支持自Android 5.0以來 - 舊版本將忽略此屬性。請注意，字形周圍將添加額外的空間（每側一半），這與iOS渲染不同。可以通過使用佈局屬性來模擬iOS渲染，例如負邊際，適合您的情況。
• textDecorationColor: color (iOS)
• textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (iOS)
• textTransform: enum('none', 'uppercase', 'lowercase', 'capitalize') (iOS)
• writingDirection: enum('auto', 'ltr', 'rtl') (iOS)

testID

disabled

selectionColor

textBreakStrategy

adjustsFontSizeToFit

minimumFontScale

suppressHighlighting