React Native 之 Text的使用

前言

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

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'）：文本对齐方式

  • auto

  	// 文本对齐方式
  	textAlign:'auto'
  
  

  效果：
  
  

  • left

  	// 文本对齐方式
  	textAlign:'left'
  
  

  效果：
  
  

  • right

  	// 文本对齐方式
  	textAlign:'right'
  
  

  效果：
  
  

  • center

  	// 文本对齐方式
  	textAlign:'center'
  
  

  效果：
  
  

  • justify

  	// 文本对齐方式
  	textAlign:'justify'
  

  效果：
  
  

• textDecorationLine（'none', 'underline', 'line-through'）：横线位置

  • none：没有横线
  • underline：

  	// 横线
  	textDecorationLine:'underline'
  
  

  效果：
  
  

  • line-through:

  	// 横线
  	textDecorationLine:'line-through'
  
  

  效果：
  
  

• textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：线风格

  • solid

  	// 横线风格
  	textDecorationStyle:'solid'
  
  

  效果：
  
  

  • double

  	// 横线风格
  	textDecorationStyle:'double'
  
  

  效果：
  
  

  • dotted

  	// 横线风格
  	textDecorationStyle:'dotted'
  
  

  效果：
  
  

  • dashed

  	// 横线风格
  	textDecorationStyle:'dashed'
  
  

  效果：
  
  

• 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 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖

很多朋友私信我说更新太慢，在这里说声抱歉，因为接近春节，公司事情比较多，还请朋友们见谅，喜欢我的文章的可以点点关注，有什么不清楚或者建议可以评论或留言，谢谢！