React Native 学习之Text组件使用详解

import React, from 'react'

import {

View,

Dimensions,

Text,

} from 'react-native';

var = 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 =

testID =

onLayout={(e)=>}

onPress ={()=>}

suppressHighlighting =

allowFontScaling=>

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

numberOfLines =

testID =

onLayout={(e)=>}

onPress ={()=>}

allowFontScaling=>

{'当火车开入这座陌生的城市,那是从来就没有见过的霓虹.'}

);

}

/*

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:这个属性是决定第二行是从左还是从右开始

}

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