React Native 學習之Text組件

/**
* @Author: fantasy
* @Date:   2016-06-15T15:52:24+08:00
* @Last modified by:   fantasy
* @Last modified time: 2016-06-15T17:31:12+08:00
*/

import React, {Component} from 'react'
import {
  View,
  Dimensions,
  Text,
} from 'react-native';

var {width:ScreenW, height:ScreenH} = Dimensions.get('window');

export default class TestImageView extends React.Component{

  _textOnLayout(param){
    console.log(param);
    //打印結果爲:{ y: 308.5, x: 0, width: 375, height: 50.5 }
  }
  _textOnPress(param){
    console.log(param);
  }

  render(){
    var testID = 'myLearnText';
    return(
      <View style={{flex:1}}>
        <View style={{height:ScreenH/2,justifyContent:'center'}}>
           <Text>{'writingDirection是ltr的樣式'}</Text>
        </View>
        <Text   style={{width:ScreenW,fontSize:17,fontStyle:'italic',fontWeight:'100',letterSpacing:1,lineHeight:15}}
                numberOfLines = {3}
                testID ={testID}
                onLayout={(e)=>{this._textOnLayout(e.nativeEvent.layout)}}
                onPress ={()=>{this._textOnPress(testID)}}
                suppressHighlighting ={true}
                allowFontScaling={false}>
         {'當火車開入這座陌生的城市,那是從來就沒有見過的霓虹,我打開離別時你送我的信件,忽然感到無比的思念,看不見雪的冬天不夜的城市,我聽見有人歡呼有人在哭泣,早習慣穿梭衝滿誘惑的黑夜,但卻無法忘記你的臉,有沒有人曾告訴你我很愛你,有沒有人曾在你日記裏哭泣,有沒有人曾告訴你我很在意,在意這座城市的距離'}
        </Text>

        <Text   style={{width:ScreenW,marginTop:100,fontSize:17,fontStyle:'normal',fontWeight:'100',lineHeight:25,textAlign:'justify',textAlignVertical:'center',textDecorationColor:'red',textDecorationStyle:'dotted',textDecorationLine:'underline',writingDirection:'ltr'}}
                numberOfLines = {3}
                testID ={testID}
                onLayout={(e)=>{this._textOnLayout(e.nativeEvent.layout)}}
                onPress ={()=>{this._textOnPress(testID)}}
                allowFontScaling={false}>
         {'當火車開入這座陌生的城市,那是從來就沒有見過的霓虹.'}
        </Text>
      </View>
  );
  }


/*
numberOfLines: 和iOS的UILabel的numberOfLine是一個意思,就是說文字適應組件的寬度的時候,如果文字寬度比組件寬度大,用這個屬性來決定Text的行數
onLayout:當這個Text組件佈局發生變化的時候,調用這個方法。
onPress: 當這個Text組件被點擊以後,會調用這個函數。
testID: 官方解釋說是‘用來在端到端測試中標記這個視圖’,兩個Text組件可以是一個textID,不會報錯。
suppressHighlighting:默認爲false,在默認情況下按下這個Text會有一個灰色的,橢圓形的高光。當爲true時,Text被按下,則沒有任何視覺效果。
style:是對這個Text組件的一個裝飾,除了View組件的一個style之外,它還有自己的一些特有的屬性。
      color:文字的顏色,和iOS的TextColor一樣,
      fontFamily:字體的類型,比如word文檔中的宋體楷體之類的,
      fontSize:字體的大小
      fontStyle:斜體和正常
      letterSpacing:字與字之間的間隙,
      lineHeight:每一行的高度,當行高大於字體的時候,字體會在組件的下面,行高20,字體是17的例子
      textAlign:是左對齊 和右對齊。justify只支持iOS
      textAlignVertical:只支持安卓  


      textDecorationLine:這三個屬性基本上是套在一起的,沒有這個屬性,其他兩個屬性設置了,也沒用
      textDecorationStyle:
      textDecorationColor:


      writingDirection:這個屬性是決定第二行是從左還是從右開始

我學習React Native的github是 https://github.com/wkffantasy/learningReact_native 歡迎大家來指正錯誤,共同學習

*/

}

以下圖片是其他屬性的一些對比


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章