前言
学习本系列内容需要具备一定 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>
);
}
```
效果:
![设置行数](http://upload-images.jianshu.io/upload_images/1923109-3deedebeac82b746.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- fontSize:字体大小
```
// 字体大小
fontSize:30
```
效果:
![文字大小](http://upload-images.jianshu.io/upload_images/1923109-bfe2e50134fbfeee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- fontFamily:字体名称
```
// 字体类型
fontFamily:'Georgia'
```
效果:
![字体类型](http://upload-images.jianshu.io/upload_images/1923109-d628aa9aaa0b0e5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- fontStyle(’normal’, ‘italic’):字体风格
```
// 字体风格
fontStyle:'italic'
```
效果:
- fontWeight(’normal’, ‘bold’, ‘100 ~ 900’):指定字体的粗细。大多数字体都支持’normal’和’bold’值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值
```
// 字体粗细
fontWeight:('bold', '700')
```
效果:
![字体粗细](http://upload-images.jianshu.io/upload_images/1923109-aeb336766d1cd345.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- textShadowOffset(width: number, height: number):设置阴影效果
textShadowColor:阴影效果颜色
// 阴影 textShadowOffset:{width:3, height:5}, // 阴影颜色 textShadowColor:'black'
效果:
textShadowRadius:阴影效果圆角(值越大阴影越模糊)
// 阴影圆角 textShadowRadius:3