---

這裡講述的是React Native 之 Text的運用的相關內容，詳細內容請看上面

前言

學習本系列內容需求具有一定 HTML 開發根底，沒有根底的冤家可以先轉至 HTML疾速入門(一) 學習

自己接觸 React Native 時間並不是特別長，所以對其中的內容和性質理解能夠會有所偏向，在學習中假如有錯會及時修正內容，也歡送萬能的冤家們批判指出，謝謝

文章第一版出自簡書，假如呈現圖片或頁面顯示問題，煩請轉至 簡書 檢查 也希望喜歡的冤家可以點贊，謝謝

Text 組件引見 在 React Native 用於顯示文本的組件就是 Text，和IOS中的 UIlabel，Android中的 TextView相似，專門用來顯示根本的文本信息，處置根本的顯示規劃外，還可以停止嵌套顯示，設置款式，曾經事情處置（如：點擊事情） Text 組件常用的屬性和辦法

color：字體顏色

    // 字體顏色
    color:'blue'

效果：

render() { return ( <View style={styles.container}> <Text style={styles.textStyle} numberOfLines={3}>雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest雨澤Forest</Text> </View> ); } 效果： // 字體大小 fontSize:30 效果： // 字體類型 fontFamily:'Georgia' 效果： // 字體作風 fontStyle:'italic' 效果： // 字體粗細 fontWeight:('bold', '700') 效果： // 暗影 textShadowOffset:{width:3, height:5}, // 暗影顏色 textShadowColor:'black' 效果： // 暗影圓角 textShadowRadius:3 效果： // 字符間距 letterSpacing:5 效果： // 行高 lineHeight:25 效果： // 文本對齊方式 textAlign:'auto' 效果： // 文本對齊方式 textAlign:'left' 效果： // 文本對齊方式 textAlign:'right' 效果： // 文本對齊方式 textAlign:'center' 效果： // 文本對齊方式 textAlign:'justify' 效果： // 橫線 textDecorationLine:'underline' 效果： // 橫線 textDecorationLine:'line-through' 效果： // 橫線作風 textDecorationStyle:'solid' 效果： // 橫線作風 textDecorationStyle:'double' 效果： // 橫線作風 textDecorationStyle:'dotted' 效果： // 橫線作風 textDecorationStyle:'dashed' 效果： // 線的顏色 textDecorationColor:'black',

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

效果： 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
        }

    });

效果： 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
        }

    });

效果： 經過實驗我們可以看出，文字控制類的屬性也是多承繼的，和 CSS 是一樣的,而且會取與自己最近的屬性歸自己所用，也就是說屬性可掩蓋 很多冤家私信我說更新太慢，在這裡說聲抱歉，由於接近春節，公司事情比擬多加上預備回廈門找任務的緣由，還請冤家們見諒，喜歡我的文章的可以點點關注喜歡哈，有什麼不清楚或許建議可以評論或留言，謝謝！



謝謝您的訪問.

【React Native 之 Text的運用】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！