此前介绍了最基本的 View 组件,接下来就是最常用的 Text 组件,对于 Text 组件的一些常用属性,这篇文章会给出简单的例子以供学习。
Text 组件对应于 Android 平台的 TextView,用来显示文本。无论做什么应用几乎都要使用它,可以说是应用最频繁的组件之一。Text 组件的内部使用的并不是 flexbox 布局,而是文本布局,因此想要使用 flexbox 设置文字居中是不可能的,解决方案就是在 Text 组件的外层套一层 View,设置 View 的 flexbox,具体的参考 2.1 节的例子代码。
Text 组件支持 View 组件的所有的 Style 属性,不了解 View 组件的 Style 属性可以查看 React Native 组件(二)View 组件解析这篇文章。
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 字体要宽大些,笔画更细一些。第二行和第三行做对比,可以明显看出第三行是斜体字并且字体更细一些。
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 值越大,阴影的偏移量就会越大。
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 |
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',
- }
- });
运行效果为:
ellipsizeMode 的取值为 enum('head', 'middle', 'tail', 'clip') , 用来设定当文本显示不下全部内容时,文本应该如何被截断,需要注意的是,它必须和 numberOfLines(文本显示的行数)搭配使用,才会发挥作用。
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。效果如下所示。
当文本被点击以后会调用 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。
属性名 | 取值 | 说明 | 平台 |
---|---|---|---|
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 跨平台移动应用开发》第二版
来源: http://blog.csdn.net/itachi85/article/details/75213428