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

}

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180112G0DDJC00?refer=cp_1026

相关快讯

扫码关注云+社区