React Native 文本组件 Text

组件Text用于显示文本

<Text>hello text</Text> //显示hello text

不可以使用其他组件直接直接将文本作为子节点

<View>文本<View>  //错误

嵌套

Text组件可以嵌套

<Text>
this is a <Text>special</Text> text
</Text>

嵌套组件样式可以继承，就近原则，

<Text style={{color:'#333', padding:10}}>
this is a
<Text style={{color:'red'}}> special </Text>
Text
</Text>

每个Text组件会从新一行起（类似块级元素），而子组件不可换行（类似行内元素），子组件字体，颜色可设置，宽高，margin，padding设置无效。

对于常用样式可以创建可复用组件

<Text style={{color:'#333', padding:10}}>this is a  
  <Strong style={{color:'red'}}> special </Strong>
  Text
</Text>

var styles = StyleSheet.create({
  bold: {
    fontWeight: "bold"
  }
});

var Strong = React.createClass({
    render: function() {
        return (
           <Text style={[styles.bold, this.props.style]}>
            {this.props.children}</Text>
        );
    }
});

属性

名称	作用	值	限制
adjustsFontSizeToFit	指定字体是否随着给定样式的限制而自动缩放。	bool
allowFontScaling	控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。	bool
minimumFontScale	当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。	可设定的值为0.01 - 1.0	ios
numberOfLines	用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。会以“...”来显示	number, 1,2,3....
onLayout	当挂载或者布局变化以后调用，参数为如下的内容：{nativeEvent: {layout: {x, y, width, height}}}	function
onLongPress	当文本被长按以后调用此回调函数。	function
onPress	当文本被点击以后调用此回调函数。	function
selectable	决定用户是否可以长按选择文本，以便复制和粘贴。	function
testID	用来在端到端测试中标记这个视图。	string
suppressHighlighting	当为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光。	bool	ios

style

名称	作用	值	限制
color	颜色	'#333','red'
fontFamily	字体	string字体名称
fontSize	字体大小	number ,13
fontStyle	字体风格	enum('normal', 'italic')
fontWeight	指定字体的粗细。	大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight	行高	number
textAlign	指定文本的对齐方式	enum('auto', 'left', 'right', 'center', 'justify')，其中'justify'值仅iOS支持，在Android上会变为left
textDecorationLine	横线位置	enum('none', 'underline', 'line-through', 'underline line-through')
textShadowColor	阴影效果颜色	颜色值
textShadowOffset	设置阴影效果	{width: number, height: number}
textShadowRadius	阴影效果圆角	number
includeFontPadding	Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false.	bool	android
textAlignVertical	文本垂直对齐方式	enum('auto', 'top', 'bottom', 'center')	android
fontVariant	字体的异体	[enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]	ios
letterSpacing	字符间距	number	ios
textDecorationColor	文本装饰线条的颜色	颜色值	ios
textDecorationStyle	文本装饰线条的形状	enum('solid', 'double', 'dotted', 'dashed')	ios
writingDirection	文本方向	enum('auto', 'ltr', 'rtl')	ios

参考：Text