React Native 之 Text的使用
来源:互联网 发布:淘宝上最好吃的美食 编辑:程序博客网 时间:2024/05/23 22:03
前言
学习本系列内容需要具备一定 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'
- auto
- 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'
- 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
是一样的,而且会取与自己最近的属性归自己所用,也就是说属性可覆盖
很多朋友私信我说更新太慢,在这里说声抱歉,因为接近春节,公司事情比较多,还请朋友们见谅,喜欢我的文章的可以点点关注,有什么不清楚或者建议可以评论或留言,谢谢!
- React-native 之Text控件的使用
- React Native 之 Text的使用
- React Native 之 Text的使用
- React Native组件之Text
- react native Text 使用详解
- React-Native 之 react-native-ImagePicke的详细使用图解
- React Native 之组件react-native-sound的使用
- 基础篇章:React Native 之 View 和 Text 的讲解
- react-native之module的使用
- React Native开发之按钮的使用
- React-Native之fetch的使用
- React-native 之Image的使用
- React-native 之Picker的使用
- React-native 之WebView的使用
- react-native 之 ref 的使用
- React Native 学习之Text组件
- React Native控件之Text组件介绍
- React Native控件之Text组件介绍
- Java编程风格学习(三)
- 如何制作Vuejs组件,并且在项目中使用
- 450. Delete Node in a BST
- JS清除选择内容的方法
- 安装SendKeys-0.3_py27.exe 时提示找不到python2.7的解决方法
- React Native 之 Text的使用
- .NET NPOI导出Excel详解
- Selenium自动化测试在
- tensorflow 在windows下安装
- Anaconda2 (64-bit) Spyder代码自动补齐-设置方式
- CentOS 7 安装 Oracle 11g
- 三分钟教你用GNU compiler collection 静态/动态 链接库
- Java集合对象排序测试
- 数据包接收系列 — IP协议处理流程(二)