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'）：文本对齐方式
// 文本对齐方式 textAlign:'auto'
效果：
// 文本对齐方式 textAlign:'left'
效果：
// 文本对齐方式 textAlign:'right'
效果：
// 文本对齐方式 textAlign:'center'
效果：
// 文本对齐方式 textAlign:'justify'
效果：
-
justify
-
center
-
right
-
left
-
auto
-
-
textDecorationLine（'none', 'underline', 'line-through'）：横线位置
// 横线 textDecorationLine:'underline'
效果：
// 横线 textDecorationLine:'line-through'
效果：
-
line-through:
-
none：没有横线
-
underline：
-
-
textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：线风格
// 横线风格 textDecorationStyle:'solid'
效果：
// 横线风格 textDecorationStyle:'double'
效果：
// 横线风格 textDecorationStyle:'dotted'
效果：
// 横线风格 textDecorationStyle:'dashed'
效果：
-
dashed
-
dotted
-
double
-
solid
-
-
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 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖
