React-Native 之 Text的使用

時間 2019-11-11

標籤 react native text 使用欄目 React 简体版

原文原文鏈接

前言

學習本系列內容須要具有必定 HTML 開發基礎，沒有基礎的朋友能夠先轉至 HTML快速入門(一) 學習函數
本人接觸 React Native 時間並非特別長，因此對其中的內容和性質瞭解可能會有所誤差，在學習中若是有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝佈局
文章初版出自簡書，若是出現圖片或頁面顯示問題，煩請轉至簡書查看也但願喜歡的朋友能夠點贊，謝謝學習

Text 組件介紹

在 React Native 用於顯示文本的組件就是 Text，和iOS中的 UIlabel，Android中的 TextView相似，專門用來顯示基本的文本信息，處理基本的顯示佈局外，還能夠進行嵌套顯示，設置樣式，已經事件處理（如：點擊事件）

Text 組件經常使用的屬性和方法

color：字體顏色測試
```
// 字體顏色
    color:'blue'
```
效果：字體

numberOfLines：設置 Text 顯示文本的行數，若是顯示的內容超過行數，默認其他的文本信息再也不顯示flex

render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle} numberOfLines={3}>雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest</Text>
            </View>
        );
    }

效果：

fontSize：字體大小3d
```
// 字體大小
    fontSize:30
```
效果：

fontFamily：字體名稱rest

// 字體類型
    fontFamily:'Georgia'

效果：

fontStyle（'normal', 'italic'）：字體風格code
```
// 字體風格
    fontStyle:'italic'
```
效果：
fontWeight（'normal', 'bold', '100 ~ 900'）：指定字體的粗細。大多數字體都支持'normal'和'bold'值。並不是全部字體都支持全部的數字值。若是某個值不支持，則會自動選擇最接近的值orm
```
// 字體粗細
    fontWeight:('bold', '700')
```
效果：
textShadowOffset（width: number, height: number）：設置陰影效果

textShadowColor：陰影效果顏色

// 陰影
    textShadowOffset:{width:3, height:5},
    // 陰影顏色
    textShadowColor:'black'

效果：

textShadowRadius：陰影效果圓角（值越大陰影越模糊）
```
// 陰影圓角
    textShadowRadius:3
```
效果：
letterSpacing：字符間距
```
// 字符間距
    letterSpacing:5
```
效果：
lineHeight：行高
```
// 行高
    lineHeight:25
```
效果：

textAlign（'auto', 'left', 'right', 'center', 'justify'）：文本對齊方式

auto

// 文本對齊方式
    textAlign:'auto'

效果：

left

// 文本對齊方式
    textAlign:'left'

效果：

right

// 文本對齊方式
    textAlign:'right'

效果：

center

// 文本對齊方式
    textAlign:'center'

效果：

justify

// 文本對齊方式
    textAlign:'justify'

效果：

textDecorationLine（'none', 'underline', 'line-through'）：橫線位置
- none：沒有橫線
- underline：
```
// 橫線
    textDecorationLine:'underline'
```
效果：
- line-through:
```
// 橫線
    textDecorationLine:'line-through'
```
效果：

textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：線風格

solid

// 橫線風格
    textDecorationStyle:'solid'

效果：

double

// 橫線風格
    textDecorationStyle:'double'

效果：

dotted

// 橫線風格
    textDecorationStyle:'dotted'

效果：

dashed

// 橫線風格
    textDecorationStyle:'dashed'

效果：

textDecorationColor：線的顏色

// 線的顏色
    textDecorationColor:'black',

效果：

allowFontScaling：控制字體是否要根據iOS的「文本大小」輔助選項來進行縮放
adjustsFontSizeToFit：指定字體是否隨着給定樣式的限制而自動縮放
minimumFontScale：當adjustsFontSizeToFit開啓時，指定最小的縮放比（即不能低於這個值）。可設定的值爲0.01 - 1.0
suppressHighlighting：當爲true時，若是文本被按下，則沒有任何視覺效果。默認狀況下，文本被按下時會有一個灰色的、橢圓形的高光

selectable：決定用戶是否能夠長按選擇文本，以便複製和粘貼

render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}
                    selectable={true}
                >
                    雨澤Forest
                </Text>
            </View>
        );
    }

效果：

testID：用來在端到端測試中標記這個視圖

onPress：當文本發生點擊的時候調用該方法

render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}
                    onPress={()=>{alert('點擊')}}
                >
                    雨澤Forest
                </Text>
            </View>
        );
    }

效果：

onLongPress：當文本被長按之後調用此回調函數（參考onPress）
onLayout：當掛載或者佈局變化之後調用（參數爲：{nativeEvent: {layout: {x, y, width, height}}}）(參考onPress)

Text 使用

視圖部分

render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}>雨澤Forest</Text>
            </View>
        );
    }

樣式部分

var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'green',
        },

        textStyle: {
            // 背景色
            backgroundColor:'yellow',
            // 字體大小
            fontSize:30,
            // 下劃橫線
            textDecorationLine:'underline'
        }

    });

效果：

Text 組件的嵌套使用

視圖部分

var test = React.createClass({
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.textStyle} numberOfLines={3}>
                    雨澤
                    <Text style={{color:'orange'}}>
                            Forest
                    </Text>
                    </Text>
                </View>
            );
        }
    });

樣式部分

var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'green',
        },

        textStyle: {
            // 字體顏色
            color:'blue',
            // 字體大小
            fontSize:30
        }

    });

效果：

Text 組件中樣式的繼承

在 React Native 中是沒有樣式繼承這種說法的，但對於 Text 元素裏邊的 Text 元素，實際上是能夠繼承的，至因而單繼承仍是多繼承，咱們能夠來試驗一下

視圖部分

var test = React.createClass({
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.textStyle} numberOfLines={3}>
                        <Text>
                            <Text>雨澤Forest</Text>
                        </Text>
                    </Text>
                </View>
            );
        }
    });

樣式部分

var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'green',
        },

        textStyle: {
            // 字體顏色
            color:'blue',
            // 字體大小
            fontSize:30
        }

    });

效果：