Text一个用于显示文本的 React组件，并且它也支持嵌套、样式，以及触摸处理。
1，简单的样例
(1)效果图
下面给 Text设置了字体大小、颜色、阴影，并加粗。
(2)样例代码
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
} from ‘react-native’;
class Main extends Component {
render() {
return (
编程社区
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
marginLeft:5,
marginRight:5,
},
font:{
color:’#FF7700′,
fontSize:40,
fontWeight:’bold’,
textShadowColor:’#C0C0C0′,
textShadowRadius:2,
textShadowOffset:{width:2,height:2},
},
});
AppRegistry.registerComponent(‘HelloWorld’, () => Main);
2，Text支持的样式
Text组件除了可以使用 View组件所有的 Style，还支持如下样式：
名称
作用
值
适用设备
color
字体颜色
多种形式
通用
fontFamily
字体名称
fontFamily 用来指定 Text 组件以何种字体族显示。它的取值有:
serif：该字体族在字的笔画开始及结束的地方有额外的装饰，而笔画的粗细会因横直地不同而有所不同。
sans-serif：该字体族没有额外的装饰，笔画粗细大致差不多。
monospace：由于打字机的出现，又独立出了这种等宽字体种类。
以及延伸出来的：sans-serif-light、sans-serif-thin、sans-serif-condensed、sans-serif-medium
通用
fontSize
字体大小
数字
通用
fontStyle
字体风格
normal、italic
通用
fontWeight
字体粗细权重
normal、bold、100、200、300、400、500、600、700、800、900
normal和bold适用于大多数字体，分别表示正常字体和粗体。
其后的9个数字序列代表从最细(100)到最粗(900)的字体粗细程度，每一个数字定义的粗细都要比上一个等级稍微粗一些。但不是所有的字体的值都能用数字值，在这种情况下，最接近的值被选择。
通用
lineHeight
行高
数字
通用
textAlign
文本对齐方法
auto、left、right、center、justify。
auto表示根据组件显示的字符语言来决定字符串如何排列，比如英语将自动从左向右排列，而阿拉伯语将自动从右向左排列。
justify值只支持iOS,在Android上会自动回退到left。
通用
textDecorationLine
横线位置
none、underline、line-through、underline line-through
通用
textShadowColor
阴影效果颜色
多种形式
通用
textShadowOffset
设置阴影效果
{width:number,height:number}
通用
textShadowRadius
阴影效果圆角
数字
通用
includeFontPadding
文本是否包含顶部和底部额外空白
默认为：true。即显示字符串时提供了额外的字体填充，从而为英文字符中的上行字母(b,d,f,h,l)与下行字母(g,j,y)提供空间以美化显示。
但这种美化在使用某些字体时会让字符串显得排列不整齐。如果发生这种情况，可以将includeFontPadding设为false,并将textAlignVertical设为center。
只支持Android
selectionColor
当文本被选中时突出显示的颜色
多种形式
只支持Android
textAlignVertical
文本垂直对齐方式
auto、top、bottom、center
只支持Android
textBreakStrategy
英文文本的分段策略
simple、highQuality(默认值)、balanced
只支持Android
letterSpacing
字符间距
数字
只支持iOS
textDecorationColor
文本装饰线条的颜色
多种形式
只支持iOS
textDecorationStyle
文本装饰线条的风格
solid、double、dotted、dashed
只支持iOS
writingDirection
文本方向
auto、ltr、rtl
只支持iOS
3，样式的继承
React Native开发同 Web开发相比，样式的继承是有区别的。
在 Web开发中，如果网页大部分地方的字体都是 12px。我们只需要在 body 上设置字体大小是 12ox，那么页面上所有元素的默认字体大小就都是 12px。
而 React Native不支持这种继承，字体样式只有在 Text组件上才起作用。因此字体样式的继承也只能通过 Text组件来实现，即内部的 Text组件可以继承外部 Text组件的样式。
(1)效果图
下面样例中左右两个Text组件的颜色不同，但它们的字体大小、粗细都是一样的。
(2)样例代码
我们就可以在这两个 Text的最外层再嵌套一个 Text组件，将公共样式设置在这里。
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
} from ‘react-native’;
class Main extends Component {
render() {
return (
欢迎访问
hangge.com
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
marginLeft:5,
marginRight:5,
},
font:{
fontSize:28,
fontWeight:’bold’,
},
font1:{
color:’#FF7700′,
},
font2:{
color:’#2D9900′,
},
});
AppRegistry.registerComponent(‘HelloWorld’, () => Main);
4，点击事件响应
当 Text被点击或者按下时会调用 onPress方法。而长按的话会调用 onLongPress方法。
下面样例当点击 Text组件时，弹出一个消息框。
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
} from ‘react-native’;
class Main extends Component {
render() {
return (
欢迎访问 hangge.com
);
}
show(msg){
alert(msg);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
marginLeft:5,
marginRight:5,
},
font:{
fontSize:28,
fontWeight:’bold’,
},
});
AppRegistry.registerComponent(‘HelloWorld’, () => Main);
5，numberOfLines属性
Text在文字在文字过长的情况下会自动换行。我们可以通过 numberOfLines属性来规定最多显示多少行，如果超出该数值，则以省略号(…)表示。
hangge.com 做最好的开发者知识平台
6，ellipsizeMode 属性
这个通常和上面的 numberOfLines属性配合使用，表示当 Text组件无法全部显示需要显示的字符串时如何用省略号进行修饰。
该属性有如下 4 种取值：
head：头部显示省略号
middle：中间显示省略号
tail：尾部使用省略号(默认值)
clip：不显示省略号，尾部直接截断
hangge.com 做最好的开发者知识平台
7，onLayout方法
当 Text 组件的布局变化时会调用 onLayout方法。
(1)样例效果图及代码
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
} from ‘react-native’;
class Main extends Component {
render() {
return (
hangge.com 做最好的开发者知识平台
);
}
textOnLayout(e){
const layout = e.nativeEvent.layout;
console.log(layout);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
marginLeft:5,
marginRight:5,
},
font:{
fontSize:28,
fontWeight:’bold’,
},
});
AppRegistry.registerComponent(‘HelloWorld’, () => Main);
(2)页面初始化后，打印结果如下：
8，selectable 属性
(1)这个是布尔类型的属性，默认值为：false
(2)当它为 true时，字符串组件中的文字可以被选择并被复制到手机系统的剪贴板中。
hangge.com 做最好的开发者知识平台
9，Text 组件的嵌套
(1)我们在开发中可以使用嵌套的 Text组件，它们的样式遵循如下规则：
子 Text组件将继承它的父 Text组件的样式。
子 Text组件只能增加父 Text组件没有指定的样式。
子 Text组件不能覆盖从父 Text组件继承而来的样式。覆盖了也不会生效，并且在开发模式下会弹出警告。
(2)在嵌套 Text组件的显示字符串中，希望重起一行显示的字符串必须要在字符串前加{‘\r\n’}，否则会接着上一行末显示。
hangge.com
{‘\r\n’}做最好的
{‘\r\n’}开发者知识平台
10，文字垂直居中
(1)想要让 Text组件内部的文字水平居中，只需要将其 textAlign设为 center即可。
(2)但如果想让内部的文字垂直居中，将其 justifyContent设为 center是没有效果的。正确的做法应该是在 Text外再加一个包围它的 View，然后让 Text组件在这个 View内垂直居中。
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
} from ‘react-native’;
class Main extends Component {
render() {
return (
hangge.com
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
marginLeft:5,
marginRight:5,
alignItems:’center’,
},
viewForTextStyle:{
height:100,
width:200,
alignItems:’center’,
justifyContent:’center’,
backgroundColor:’orange’
},
textStyle:{
color:’white’,
fontWeight:’bold’,
fontSize:26
}
});
AppRegistry.registerComponent(‘HelloWorld’, () => Main);
11，在字符串中插入图像
Text组件除了可以用来显示文字，还可以在其内部插入图像。
注意：如果是 iOS平台，除了可以在字符串中插入图像，还可插入一个 View，这个 View内容由开发者自己生成。
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} from ‘react-native’;
class Main extends Component {
render() {
var image = require(‘./logo.png’);
return (
欢迎访问 …
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
alignItems:’center’,
},
welcome:{
fontSize:30
},
imageInText:{
width:260,
height:55,
resizeMode:’cover’
}
});
AppRegistry.registerComponent(‘HelloWorld’, () => Main);
附：下面是 iOS 平台独有的属性
1，adjustsFontSizeToFit 属性
(1)这个是布尔类型的属性，默认值为：false
(2)当它为 true时，Text组件会自动按比例缩小字体以适应样式限制。
2，allowFontScaling 属性
(1)这个是布尔类型的属性，默认值为：true
(2)当它为 true时，Text组件字体会自动根据 iOS的“文本大小”辅助选项来进行缩放。
3，minimumFontScale 属性
(1)它定义了当字体因为 adjustsFontSizeToFit生效而按比例缩小时，字体的最小缩小比例。
(2)取值范围：0.01 ~ 1.0
4，suppressHighlighting 属性
这个是布尔类型的属性，默认值为：false
当它为 false时，Text组件被按下后，会被突出显示为一个灰色椭圆背景组件。
当它为 true时，Text组件被按下后不会有任何视觉上的变化。
注意：这个属性只有 Text组件设置了 onPress属性或者 onLongPress属性时才会生效。