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(
     
       
           {'writingDirection是ltr的样式'}
       

                        numberOfLines = {3}
                testID ={testID}
                onLayout={(e)=>{this._textOnLayout(e.nativeEvent.layout)}}
                onPress ={()=>{this._textOnPress(testID)}}
                suppressHighlighting ={true}
                allowFontScaling={false}>
         {'当火车开入这座陌生的城市,那是从来就没有见过的霓虹,我打开离别时你送我的信件,忽然感到无比的思念,看不见雪的冬天不夜的城市,我听见有人欢呼有人在哭泣,早习惯穿梭冲满诱惑的黑夜,但却无法忘记你的脸,有没有人曾告诉你我很爱你,有没有人曾在你日记里哭泣,有没有人曾告诉你我很在意,在意这座城市的距离'}
       


                        numberOfLines = {3}
                testID ={testID}
                onLayout={(e)=>{this._textOnLayout(e.nativeEvent.layout)}}
                onPress ={()=>{this._textOnPress(testID)}}
                allowFontScaling={false}>
         {'当火车开入这座陌生的城市,那是从来就没有见过的霓虹.'}
       

     

  );
  }


/*
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的例子 React Native 学习之Text组件_第1张图片
      textAlign:是左对齐 和右对齐。justify只支持iOS
      textAlignVertical:只支持安卓  


      textDecorationLine:这三个属性基本上是套在一起的,没有这个属性,其他两个属性设置了,也没用
      textDecorationStyle:
      textDecorationColor:


      writingDirection:这个属性是决定第二行是从左还是从右开始

我学习React Native的github是 https://github.com/wkffantasy/learningReact_native 欢迎大家来指正错误,共同学习

*/

}

以下图片是其他属性的一些对比React Native 学习之Text组件_第2张图片React Native 学习之Text组件_第3张图片React Native 学习之Text组件_第4张图片React Native 学习之Text组件_第5张图片React Native 学习之Text组件_第6张图片React Native 学习之Text组件_第7张图片


你可能感兴趣的:(React,Native学习)