前言

此前介紹了最基本的View組件辱志，接下來就是最常用的Text組件客冈，對于Text組件的一些常用屬性渠缕，這篇文章會給出簡單的例子以供學(xué)習(xí)馍忽。

1 概述

Text組件對應(yīng)于Android平臺的TextView棒坏，用來顯示文本。無論做什么應(yīng)用幾乎都要使用它遭笋，可以說是應(yīng)用最頻繁的組件之一坝冕。Text組件的內(nèi)部使用的并不是flexbox布局，而是文本布局瓦呼，因此想要使用flexbox設(shè)置文字居中是不可能的喂窟，解決方案就是在Text組件的外層套一層View，設(shè)置View的flexbox央串，具體的參考2.1節(jié)的例子代碼磨澡。

2 Style屬性

Text組件支持View組件的所有的Style屬性，不了解View組件的Style屬性可以查看React Native組件（二）View組件解析這篇文章质和。

2.1 字體相關(guān) 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);

運行程序效果如下圖所示饲宿。

第一行和第二行對比秩命，發(fā)現(xiàn)monospace（等寬）字體要比serif字體要寬大些，筆畫更細(xì)一些褒傅。第二行和第三行做對比，可以明顯看出第三行是斜體字并且字體更細(xì)一些袄友。

2.2 陰影相關(guān) Style屬性

改寫2.1小節(jié)的例子中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的值越大，陰影就會越不精細(xì)鸠按。第二行和第三行對比礼搁，textShadowOffset的width和height值越大，陰影的偏移量就會越大目尖。

2.3 平臺獨有的Style屬性

2.4 其他Style屬性

我們設(shè)置不同的textDecorationLine的值饮戳，改寫2.1小節(jié)的例子中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') ,用來設(shè)定當(dāng)文本顯示不下全部內(nèi)容時，文本應(yīng)該如何被截斷洞拨，需要注意的是扯罐，它必須和numberOfLines（文本顯示的行數(shù)）搭配使用，才會發(fā)揮作用烦衣。

• head：從文本的開頭進(jìn)行截斷歹河，并在文本的開頭添加省略號掩浙，例如：...xyz。
• middle ：從文本的中間進(jìn)行截斷秸歧，并在文本的中間添加省略號厨姚，例如：ab...yz。
• tail：從文本的末尾進(jìn)行截斷寥茫，并在文本的末尾添加省略號遣蚀，例如：abcd...。
• clip ：文本的末尾顯示不下的內(nèi)容會被截斷纱耻，并且不添加省略號芭梯，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 = '宇智波鼬的終極忍術(shù)是伊邪那美弄喘。';
        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);

分別設(shè)置ellipsizeMode的值為head玖喘、middle和tail。效果如下所示蘑志。

3.2 onPress/onLongPress

當(dāng)文本被點擊以后會調(diào)用onPress回調(diào)函數(shù)累奈，類似的還有onLongPress，當(dāng)文本被長按時會調(diào)用onLongPress回調(diào)函數(shù)急但。
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);

當(dāng)我們點擊第一個Text時澎媒，會彈出標(biāo)題為“點擊文本彈出”的Alert。長按第二個Text時波桩，會彈出標(biāo)題為“長按文本彈出”的Alert戒努。

3.3 其他屬性

還有一些屬性這里沒有提到撒穷，比如方便失能人士使用手機(jī)而提供的相關(guān)屬性等等，具體的屬性請查看官方文檔裆熙。