相关文章
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相关原创技术干货。
扫一扫下方二维码或者长按识别二维码，即可关注。
1454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
