React Native组件(三)Text组件解析

前言

此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。

1 概述

Text组件对应于Android平台的TextView,用来显示文本。无论做什么应用几乎都要使用它,可以说是应用最频繁的组件之一。Text组件的内部使用的并不是flexbox布局,而是文本布局,因此想要使用flexbox设置文字居中是不可能的,解决方案就是在Text组件的外层套一层View,设置View的flexbox,具体的参考2.1节的例子代码。

2 Style属性

Text组件支持View组件的所有的Style属性,不了解View组件的Style属性可以查看React Native组件(二)View组件解析这篇文章。

2.1 字体相关 Style属性

举个简单的例子,如下所示。

index.android.js

运行程序效果如下所示。

第一行和第二行对比,发现monospace(等宽)字体要比serif字体要宽大些,笔画更细一些。第二行和第三行做对比,可以明显看出第三行是斜体字并且字体更细一些。

2.2 阴影相关 Style属性

改写2.1小节的例子中styles的代码,如下所示。

运行效果如下图所示。

第一行和第二行对比,可以看到textShadowRadius的值越大,阴影就会越不精细。第二行和第三行对比,textShadowOffset的width和height值越大,阴影的偏移量就会越大。

2.3 平台独有的Style属性

2.4 其他Style属性

我们设置不同的textDecorationLine的值,改写2.1小节的例子中styles的代码:

运行效果为:

3 属性

3.1 ellipsizeMode

ellipsizeMode的取值为enum(‘head’, ‘middle’, ‘tail’, ‘clip’) ,用来设定当文本显示不下全部内容时,文本应该如何被截断,需要注意的是,它必须和numberOfLines(文本显示的行数)搭配使用,才会发挥作用。

  • head:从文本的开头进行截断,并在文本的开头添加省略号,例如:…xyz。
  • middle :从文本的中间进行截断,并在文本的中间添加省略号,例如:ab…yz。
  • tail:从文本的末尾进行截断,并在文本的末尾添加省略号,例如:abcd…。
  • clip :文本的末尾显示不下的内容会被截断,并且不添加省略号,clip只适用于iOS平台。

index.android.js

分别设置ellipsizeMode的值为head、middle和tail。效果如下所示。

3.2 onPress/onLongPress

当文本被点击以后会调用onPress回调函数,类似的还有onLongPress,当文本被长按时会调用onLongPress回调函数。 index.android.js

当我们点击第一个Text时,会弹出标题为“点击文本弹出”的Alert。长按第二个Text时,会弹出标题为“长按文本弹出”的Alert。

3.3 其他属性

还有一些属性这里没有提到,比如方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2017-07-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 是/否 按钮 顶

可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

1845
来自专栏无原型不设计

Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create) 先看看豆瓣新加日记的网页: ? 再看看已经制作好的原型预览...

5606
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.5K4
来自专栏DannyHoo的专栏

UIButton中的setBackgroundImage和setImage方法的选择

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details...

1882
来自专栏河湾欢儿的专栏

选中分享

941
来自专栏AhDung

【手记】理想的网页列表效果

单纯用ul/ol的list-style-position是搞不掂的,inside是可以让整个列表区块与段落对齐,但会失去项间悬挂对齐效果;outside倒是悬挂...

1352
来自专栏练小习的专栏

Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

1888
来自专栏自动化测试实战

HTML第一课——基础知识普及【2】

2216
来自专栏岑志军的专栏

ReactNative-综合案例(01)

1443
来自专栏AndroidTv

前端入门2-HTML标签声明正文-HTML标签

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1962

扫码关注云+社区

领取腾讯云代金券