React Native组件(三)Text组件解析
来源:互联网 发布:ubuntu镜像文件iso下载 编辑:程序博客网 时间:2024/06/09 02:58
相关文章
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属性
举个简单的例子,如下所示。
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属性
改写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属性
2.4 其他Style属性
我们设置不同的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 其他属性
还有一些属性这里没有提到,比如方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。
参考资料
官方文档
《React Native跨平台移动应用开发》第二版
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。
- React Native组件(三)Text组件解析
- (二)React Native---Text 组件
- React Native组件之Text
- React Native组件篇(一) — Text组件
- react native组件学习(三)
- React Native组件(二)View组件解析
- React Native组件(四)TextInput组件解析
- React Native组件篇(三) — TextInput组件
- React Native 学习之Text组件
- React Native控件之Text组件介绍
- React Native控件之Text组件介绍
- React Native控件之Text组件介绍
- React Native之Text组件numberofLines属性
- React Native 组件之Touchable*源码解析
- React Native学习笔记(三)组件生命周期
- (三)React Native中Navigation组件的快速入门
- 【React Native】组件的声明周期与通信(三)
- React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面
- 最小生成树总结
- 开源个小工具simple-repo
- 深入理解Java类加载器(2):线程上下文类加载器
- JAVA开发环境搭建中配置环境变量错误产生JAVAC' 不是内部或外部命令‘
- 52.网络参数管理者: DHCP
- React Native组件(三)Text组件解析
- 聊聊分布式事务
- LeetCode 535. Encode and Decode TinyURL
- BZOJ 1036 树的统计Count 树链剖分
- 分布式锁的三种实现方法
- Golang xml 使用
- 每周一本书之《数据天才:数据科学家修炼之道》
- 基于套接字SOCKET的及时聊天
- Harmattan:一款时尚的Linux桌面伴侣