React Native組件（三）Text組件解析

時間 2019-11-17

原文原文鏈接

前言

此前介紹了最基本的View組件，接下來就是最經常使用的Text組件，對於Text組件的一些經常使用屬性，這篇文章會給出簡單的例子以供學習。
react

1 概述

Text組件對應於Android平臺的TextView，用來顯示文本。不管作什麼應用幾乎都要使用它，能夠說是應用最頻繁的組件之一。Text組件的內部使用的並非flexbox佈局，而是文本佈局，所以想要使用flexbox設置文字居中是不可能的，解決方案就是在Text組件的外層套一層View，設置View的flexbox，具體的參考2.1節的例子代碼。android

2 Style屬性

Text組件支持View組件的全部的Style屬性，不瞭解View組件的Style屬性能夠查看React Native組件（二）View組件解析這篇文章。git

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.jsgithub

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);複製代碼

運行程序效果以下圖所示。react-native

第一行和第二行對比，發現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