React Native组件(三)Text组件解析
相关文章
React Native探索系列
React Native组件系列
前言
此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。
1 概述
Text组件对应于Android平台的TextView,用来显示文本。无论做什么应用几乎都要使用它,可以说是应用最频繁的组件之一。Text组件的内部使用的并不是flexbox布局,而是文本布局,因此想要使用flexbox设置文字居中是不可能的,解决方案就是在Text组件的外层套一层View,设置View的flexbox,具体的参考2.1节的例子代码。
2 Style属性
Text组件支持View组件的所有的Style属性,不了解View组件的Style属性可以查看React Native组件(二)View组件解析这篇文章。
2.1 字体相关 Style属性
Style属性名 | 取值 | 说明 |
---|---|---|
fontFamily | enum(‘sans-serif’, ‘serif’,’monospace’,’sans-serif-light’,’sans-serif-thin’,’sans-serif-condensed’,’sans-serif-medium’) | 英文字符串的样式 |
fontSize | number | 字体大小 |
fontStyle | enum(‘normal’, ‘italic’) | 字体风格是普通还是斜体 |
fontWeight | enum(‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’) | 字体粗细程度 |
举个简单的例子,如下所示。
index.android.js
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
class TextApp extends Component {render() {return (<View style={styles.viewStyle}><Text style={styles.textStyle1}>itachi</Text><Text style={styles.textStyle2}>itachi</Text><Text style={styles.textStyle3}>itachi</Text></View>);}
}
const styles = StyleSheet.create({viewStyle: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white'},textStyle1: {fontFamily: 'monospace',fontSize: 20,fontStyle: 'normal',fontWeight: '900'},textStyle2: {fontFamily: 'serif',fontSize: 20,fontStyle: 'normal',fontWeight: '900'},textStyle3: {fontFamily: 'serif',fontSize: 20,fontStyle: 'italic',fontWeight: '300'}
});
AppRegistry.registerComponent('ViewSample', () => TextApp);
运行程序效果如下图所示。
第一行和第二行对比,发现monospace(等宽)字体要比serif字体要宽大些,笔画更细一些。第二行和第三行做对比,可以明显看出第三行是斜体字并且字体更细一些。
2.2 阴影相关 Style属性
Style属性名 | 取值 | 说明 |
---|---|---|
textShadowColor | color | 阴影颜色 |
textShadowOffset | {width: number, height: number} | 阴影效果 |
textShadowRadius | number | 阴影圆角 |
改写2.1小节的例子中styles的代码,如下所示。
const styles = StyleSheet.create({viewStyle: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white'},textStyle1: {fontSize: 20,textShadowColor: 'blue',textShadowOffset: {width: 5, height: 5},textShadowRadius: 1},textStyle2: {fontSize: 20,textShadowColor: 'blue',textShadowOffset: {width: 5, height: 5},textShadowRadius: 5},textStyle3: {fontSize: 20,textShadowColor: 'blue',textShadowOffset: {width: 2, height: 2},textShadowRadius: 5}
});
运行效果如下图所示。
第一行和第二行对比,可以看到textShadowRadius的值越大,阴影就会越不精细。第二行和第三行对比,textShadowOffset的width和height值越大,阴影的偏移量就会越大。
2.3 平台独有的Style属性
Style属性名 | 取值 | 说明 | 平台 |
---|---|---|---|
includeFontPadding | bool | 默认值是true,显示文本时额外的字体填充 | Android |
textAlignVertical | enum(‘auto’, ‘top’, ‘bottom’, ‘center’) | 垂直方向上文本对齐的方式 | Android |
letterSpacing | number | 每个字符之间的空间 | iOS |
textDecorationColor | color | 文本装饰线条的颜色 | iOS |
textDecorationStyle | enum(‘solid’, ‘double’, ‘dotted’, ‘dashed’) | 文本装饰线条的风格 | iOS |
writingDirection | enum(‘auto’, ‘ltr’, ‘rtl’) | 文本的书写方向 | iOS |
2.4 其他Style属性
Style属性名 | 取值 | 说明 |
---|---|---|
textAlign | enum(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’) | 文本对齐方式,justify只在iOS平台有效,在Android平台等价于Left |
textDecorationLine | enum(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’) | 横线相关设置 |
lineHeight | number | 行的高度 |
我们设置不同的textDecorationLine的值,改写2.1小节的例子中styles的代码:
const styles = StyleSheet.create({viewStyle: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white'},textStyle1: {fontSize: 20,textDecorationLine: 'underline',},textStyle2: {fontSize: 20,textDecorationLine: 'line-through',},textStyle3: {fontSize: 20,textDecorationLine: 'underline line-through',}
});
运行效果为:
3 属性
3.1 ellipsizeMode
ellipsizeMode的取值为enum(‘head’, ‘middle’, ‘tail’, ‘clip’) ,用来设定当文本显示不下全部内容时,文本应该如何被截断,需要注意的是,它必须和numberOfLines(文本显示的行数)搭配使用,才会发挥作用。
- head:从文本的开头进行截断,并在文本的开头添加省略号,例如:…xyz。
- middle :从文本的中间进行截断,并在文本的中间添加省略号,例如:ab…yz。
- tail:从文本的末尾进行截断,并在文本的末尾添加省略号,例如:abcd…。
- clip :文本的末尾显示不下的内容会被截断,并且不添加省略号,clip只适用于iOS平台。
index.android.js
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
class TextApp extends Component {render() {let str = '宇智波鼬的终极忍术是伊邪那美。';return (<View style={styles.viewStyle}><Text style={styles.textStyle} ellipsizeMode='head' numberOfLines={1}>{str}</Text><Text style={styles.textStyle} ellipsizeMode='middle' numberOfLines={1}>{str}</Text><Text style={styles.textStyle} ellipsizeMode='tail' numberOfLines={1}>{str}</Text></View>);}
}
const styles = StyleSheet.create({viewStyle: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white'},textStyle: {fontSize: 20,width: 150,padding: 1}
});
AppRegistry.registerComponent('ViewSample', () => TextApp);
分别设置ellipsizeMode的值为head、middle和tail。效果如下所示。
3.2 onPress/onLongPress
当文本被点击以后会调用onPress回调函数,类似的还有onLongPress,当文本被长按时会调用onLongPress回调函数。
index.android.js
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text, Alert} from 'react-native';
class TextApp extends Component {render() {return (<View style={styles.viewStyle}><Text onPress={onTextPress}>点击文本</Text><Text onLongPress={onLongTextPress}>长按文本</Text></View>);}
}
const onTextPress = () => {Alert.alert('点击文本弹出');
};
const onLongTextPress = () => {Alert.alert('长按文本弹出');
};
const styles = StyleSheet.create({viewStyle: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white'},
});
AppRegistry.registerComponent('ViewSample', () => TextApp);
当我们点击第一个Text时,会弹出标题为“点击文本弹出”的Alert。长按第二个Text时,会弹出标题为“长按文本弹出”的Alert。
3.3 其他属性
属性名 | 取值 | 说明 | 平台 |
---|---|---|---|
numberOfLines | number | 文本显示的行数 | |
selectable | bool | 默认值为false,为true时可以被选择并复制到系统剪切板中 | |
selectionColor | color | 文本被选择时的高亮颜色 | Android |
adjustsFontSizeToFit | bool | 默认值为false,为true时字体会自动缩小,以适应给定的样式约束 | iOS |
minimumFontScale | number | adjustsFontSizeToFit属性为true时,设置字体的最小缩放比例,取值范围为0.01~1.0 | iOS |
还有一些属性这里没有提到,比如方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。
参考资料
官方文档
《React Native跨平台移动应用开发》第二版
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。
React Native组件(三)Text组件解析相关推荐
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- React Native 项目简单整理-组件优化
2019独角兽企业重金招聘Python工程师标准>>> 断断续续敲了一天,记录一下没有优化的分类的代码,App.js 里的代码 /*** Sample React Native Ap ...
- 16、React Native实战之TextInput组件
文本输入框:基本组件 自动补全的搜索功能 TextInput的主要属性和事件如下: autoCapitalize:枚举类型,可选值有none sentences words characters ...
- Android React Native使用原生UI组件
Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手 ...
- React Native中一些常用组件用法
View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleShee ...
- React Native获取设备信息组件
转载 https://www.jianshu.com/p/907b003835dc 本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 这次介绍的获取移动设备信息的组件名叫:reac ...
- React Native 系列(三) -- 项目结构介绍
前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...
- java去掉rn,React Native删除第三方开源组件的依赖包
最近项目即将上线,但是遇到了一个问题,安装之后第一次打开时,在有的Android手机上崩溃,之后再次运行就好了,好多Android机型都遇到这种情况,定位问题,发现是之前加载的第三方开源控件:reac ...
- react native 中下拉列表FlatList组件的讲解以及实例demo
RN中的下拉列表组件.以前RN的下拉列表是listView,但是这个组件的性能不咋地.当数据较多的时候就会很卡.所以RN就新出了一个FaltList组件来代替它.这里我们简单总结一下新的下拉组件. 一 ...
- react native 0.50 源码解析 再出发 持续更新
1.核心类 1.1 RCTRootView 一个RCTRootView持有一个RCTBridge成员变量 RCTRootView : UIViewRCTBridge *bridge;UIViewCon ...
最新文章
- 安徽理工大学计算机技术研究生,安徽理工大学(专业学位)计算机技术研究生辅导...
- cacti-0.8.7d安装
- 人工智能究竟可以创造什么新的就业机会?
- NEXUS S安卓4.0/4.1 【完美】 ROOT教程
- 【 Grey Hack 】反向Shell
- VS2008中V表结束标记的分析
- 打开VM虚拟机,遇见问题“无法连接MKS:套接字连接次数太多;正在放弃。”
- 百度人脸识别技术应用002---百度云上创建人脸库_分组_以及通过网页上传人脸照片到人脸分组
- 电脑一拖二的学习方法
- 如何从seo的维度来选择网站的关键词
- 倒立摆的实现 1.前期准备
- 【Python | 杂代码】Python 里Blueprint(蓝图)的运用
- 差点以为是本人!这个3D人体生成模型厉害了,还能自己改POSE
- JavaScript 压缩图片
- 首届“中科杯”全国软件设计大赛获奖名单揭晓
- linux 压缩文件与解压文件
- 红米Note4X开发者选项
- 我是如何从通信转到Java软件开发工程师的?
- 一觉醒来,欠费120万,移动程序员要被祭天了!
- gom列表自动选择服务器,传奇服务器-传奇服务器端 GOM GEE(必看知识)
热门文章
- Oculus客户端在Win10上面无法安装或者登陆的解决方法
- iOS11适配-Safe Area
- 九宫格摆法_九宫格婚纱照摆法图片与技巧
- java小球挡板游戏_多线程的一个小球游戏,就是以前的那个Pong游戏
- codelite开发php,C++跨平台开发环境(CodeLite)
- Nginx 负载均衡和动静分离
- html职业性格测试,MBTI职业性格测试专业版
- 【python】day07 pygame的几款游戏练习(简单版)找不同、消灭单词、汤姆猫、看图猜名
- outlook左侧栏隐藏_Outlook 2007待办事项栏中没有全天活动
- 修改CPAN配置文件