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 欢迎大家来指正错误，共同学习

*/

}

以下图片是其他属性的一些对比