一起来点React Native——常用组件之Text
一、什么是Text组件?
一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用来显示基本的文本信息;除了基本的显示布局之外,可以进行嵌套显示,设置样式,以及可以做事件(例如:点击)处理;
二、Text组件常用的属性方法
Attributes.style = { color string containerBackgroundColor string fontFamily string fontSize number fontStyle enum('normal', 'italic') fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') lineHeight number textAlign enum("auto", 'left', 'right', 'center') writingDirection enum("auto", 'ltr', 'rtl')
numberOfLines number
textAlign ("auto", 'left', 'right', 'center', 'justify'
)
fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'
) onPress fcuntion
}
注释如下:
`color` 字体颜色
`numberOfLines` (number) 进行设置Text显示文本的行数,如果显示的内容超过了行数,默认其他多余的信息就不会显示了
`onPress` (fcuntion) 该方法当文本发生点击的时候调用该方法
`color` 字体颜色
`fontFamily` 字体名称
`fontSize` 字体大小
`fontStyle` 字体风格(normal,italic)
`fontWeight ` 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
`textShadowOffset` 设置阴影效果{width: number, height: number}
`textShadowRadius` 阴影效果圆角
`textShadowColor` 阴影效果的颜色
`letterSpacing` 字符间距
`lineHeight` 行高
`textAlign` 文本对其方式("auto", 'left', 'right', 'center', 'justify')
`textDecorationLine` 横线位置 ("none", 'underline', 'line-through', 'underline line-through')
`textDecorationStyle` 线的风格("solid", 'double', 'dotted', 'dashed')
`textDecorationColor` 线的颜色
`writingDirection` 文本方向("auto", 'ltr', 'rtl')
三、Text组件中常用属性的应用
运行结果如下:
三、Text组件中样式的继承
在React-native中是没有样式继承这种说法的, 但是对于Text元素里边的Text元素,其实是能够继承的,那么是单层继承还是多层继承?
代码演示:
运行结果:
结论:文字控制类的属性也是多重继承的,和css中是一样的
一起来点React Native——常用组件之Text的更多相关文章
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- react native 常用组件汇总
react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...
- React Native常用组件之ListView
1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...
- React Native常用组件之ScrollView
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...
- 一起来点React Native——常用组件之Touchable系列
在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸 Touchab ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React Native常用组件之ListView组件
学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...
- React Native常用组件之ScrollView组件
一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...
- React Native常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
随机推荐
- python enumerate用法总结--转载
enumerate()说明 enumerate()是python的内置函数 enumerate在字典上是枚举.列举的意思 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enum ...
- Codeforces Beta Round #94 div 1 D Numbers map+思路
D. Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- 微信小程序发起支付流程
小程序调起支付API 需要参数 邮件中参数 API参数名 详细说明 APPID appid appid是微信小程序后台APP的唯一标识,在小程序后台申请小程序账号后,微信会自动分配对应的appid,用 ...
- iOS开发中各种关键字的区别
1.一些概念 1.浅Copy:指针的复制,只是多了一个指向这块内存的指针,共用一块内存. 深Copy:内存的复制,两块内存是完全不同的, 也就是两个对象指针分别指向不同的内存,互不干涉. 2.atom ...
- OpenGL入门程序二:绘制简单的圆
学习 绘制一个圆: ; const float Pi = 3.1415926536f; const float R = 0.5f; //绘制一个圆 void DrawCircle() { //绘制一个 ...
- new JSONObject(str)无法解析 报错:org.json.JSONException: Value of type java.lang.String cannot be converted to JSONObject
org.json.JSONException: Value of type java.lang.String cannot be converted to JSONObject 解析服务器返回的Jso ...
- python 在 Windows Server 2008 r2 上 安装失败
Microsoft Visual C++ 2008 Redistributable Package link (x86): https://www.microsoft.com/en-us/downlo ...
- thinkphp导出报表
这是我写的一个方法,这个方法可以直接使用在你的代码上.下面我画红色的就是要修改或者删除的.public function import(){ /*创建PHPEXCLE读取,默认excel2007,最好 ...
- WebSocket教程(一)
一.websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有 1 ...
- maven 3.5.2 修改java_home
修改mvn.cmd文件,找到: @REM ==== START VALIDATION ==== if not "%JAVA_HOME%" == "" g ...