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属性

举个简单的例子，如下所示。
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',textStyle3: { fontFamily: 'serif',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,textShadowRadius: 5
    },textStyle3: {
        fontSize: 20,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,textDecorationLine: 'underline',},textDecorationLine: 'line-through',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,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,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,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,}); AppRegistry.registerComponent('ViewSample',() => TextApp);

当我们点击第一个Text时，会弹出标题为“点击文本弹出”的Alert。长按第二个Text时，会弹出标题为“长按文本弹出”的Alert。

3.3 其他属性

还有一些属性这里没有提到，比如方便失能人士使用手机而提供的相关属性等等，具体的属性请查看官方文档。

参考资料
官方文档
《React Native跨平台移动应用开发》第二版

欢迎关注我的微信公众号，第一时间获得博客更新提醒，以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码，即可关注。