* @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 歡迎大家來指正錯誤,共同學習
*/
}
以下圖片是其他屬性的一些對比