React Native 文本组件 Text

组件Text用于显示文本

<Text>hello text</Text> //显示hello text

不可以使用其他组件直接直接将文本作为子节点

<View>文本<View>  //错误

嵌套

Text组件可以嵌套

<Text>
this is a <Text>special</Text> text
</Text>

嵌套组件样式可以继承,就近原则,

<Text style={{color:'#333', padding:10}}>
this is a
<Text style={{color:'red'}}> special </Text>
Text
</Text>

每个Text组件会从新一行起(类似块级元素),而子组件不可换行(类似行内元素),子组件字体,颜色可设置,宽高,margin,padding设置无效。

对于常用样式可以创建可复用组件

<Text style={{color:'#333', padding:10}}>this is a  
  <Strong style={{color:'red'}}> special </Strong>
  Text
</Text>
var styles = StyleSheet.create({
  bold: {
    fontWeight: "bold"
  }
});

var Strong = React.createClass({
    render: function() {
        return (
           <Text style={[styles.bold, this.props.style]}>
            {this.props.children}</Text>
        );
    }
});

属性

名称 作用 限制
adjustsFontSizeToFit 指定字体是否随着给定样式的限制而自动缩放。 bool
allowFontScaling 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。 bool
minimumFontScale 当adjustsFontSizeToFit开启时,指定最小的缩放比(即不能低于这个值)。 可设定的值为0.01 - 1.0 ios
numberOfLines 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内,总的行数不会超过这个属性的限制。会以“...”来显示 number, 1,2,3....
onLayout 当挂载或者布局变化以后调用,参数为如下的内容:{nativeEvent: {layout: {x, y, width, height}}} function
onLongPress 当文本被长按以后调用此回调函数。 function
onPress 当文本被点击以后调用此回调函数。 function
selectable 决定用户是否可以长按选择文本,以便复制和粘贴。 function
testID 用来在端到端测试中标记这个视图。 string
suppressHighlighting 当为true时,如果文本被按下,则没有任何视觉效果。默认情况下,文本被按下时会有一个灰色的、椭圆形的高光。 bool ios

style

名称 作用 限制
color 颜色 '#333','red'
fontFamily 字体 string字体名称
fontSize 字体大小 number ,13
fontStyle 字体风格 enum('normal', 'italic')
fontWeight 指定字体的粗细。 大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值。enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight 行高 number
textAlign 指定文本的对齐方式 enum('auto', 'left', 'right', 'center', 'justify'),其中'justify'值仅iOS支持,在Android上会变为left
textDecorationLine 横线位置 enum('none', 'underline', 'line-through', 'underline line-through')
textShadowColor 阴影效果颜色 颜色值
textShadowOffset 设置阴影效果 {width: number, height: number}
textShadowRadius 阴影效果圆角 number
includeFontPadding Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为false. bool android
textAlignVertical 文本垂直对齐方式 enum('auto', 'top', 'bottom', 'center') android
fontVariant 字体的异体 [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')] ios
letterSpacing 字符间距 number ios
textDecorationColor 文本装饰线条的颜色 颜色值 ios
textDecorationStyle 文本装饰线条的形状 enum('solid', 'double', 'dotted', 'dashed') ios
writingDirection 文本方向 enum('auto', 'ltr', 'rtl') ios

参考:Text

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,519评论 1 3
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,659评论 3 184
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,199评论 0 8
  • MarkNote for mac 5.6版刚刚发布,带来了激动人心的笔记分享功能。现在你可以将笔记一键发布到Clo...
    MarkNote阅读 638评论 10 6