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相关原创技术干货。

扫一扫下方二维码或者长按识别二维码，即可关注。