React|【React Native开发】React Native控件之Text组件讲解(9) React|Native学习指南|Native

转载请标明出处：
http://blog.csdn.net/developer_jiangqq/article/details/50550518

本文出自:【江清清的博客】

(一)前言【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org
今天我们一起来看一下Text控件的具体介绍和使用方法，具体环境搭建以及相关配置的请查看之前的相关文章。
刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758)，请不要重复加群！欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)基本介绍该Text组件为React中一个基本组件，该和Android中的TextView组件相类似用来显示基本的文本信息，该控件除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件(例如:点击)处理。下面我们来一个实例：

/** * 进行简单Text组件使用实例 * Sample React Native Apptest.android.js * https://github.com/facebook/react-native */ 'use strict'; var React =require('react-native'); var { AppRegistry, Text, StyleSheet, } = React; var styles =StyleSheet.create({ titleBase:{ margin:10, textAlign:'center', color:'red', fontSize:28, fontFamily:'Cochin', }, title:{ color:'green', fontWeight:'bold', }, }); var TestText =React.createClass({ render: function() { return ( I am root text! I am chid text! ); } }); AppRegistry.registerComponent('TestText',() => TestText);

具体运行效果如下:

React|【React Native开发】React Native控件之Text组件讲解(9)

文章图片

上述实例采用TextView的嵌套方式，最外层的Text的Style titleBase定义相关风格，内层的风格style定义相关风格，我们可以看到运行效果，如果内层没有重写外层定义的样式，那么内层会进行继承。如果重写了样式，那么内层会根据自己定义的样式进行渲染，该和CSS样式表差不多。
上面例子主要定义了布局，字体大小，字体风格，颜色等相关样式，下面我们会着重进行讲解。
(三)属性方法(主要一些可用的属性)①.allowFontScaling (bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用
②.numberOfLines (number):进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了。
③.onLayout (function) 当布局位置发生变动的时候自动进行触发该方法, 其中该function的参数如下:

{nativeEvent: {layout: {x, y, width, height}}}

④.onPress (fcuntion) 该方法当文本发生点击的时候调用该方法.
(四)风格样式 1..继承可以使用View组件的所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)
2.color:字体颜色
3..fontFamily 字体名称
4..fontSize字体大小
5..fontStyle字体风格(normal,italic)
6..fontWeight字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500','600', '700', '800', '900')
7..textShadowOffset 设置阴影效果{width: number, height: number}
8..textShadowRadius 阴影效果圆角9..textShadowColor 阴影效果的颜色
10.letterSpacing 字符间距11.lineHeight行高
12.textAlign文本对其方式("auto",'left', 'right', 'center', 'justify')
13.textDecorationLine横线位置 ("none", 'underline', 'line-through', 'underlineline-through')
14.textDecorationStyle线的风格("solid", 'double', 'dotted','dashed')
15.textDecorationColor线的颜色16.writingDirection文本方向("auto", 'ltr','rtl')
(五)特别注意点 5.1.嵌套特点:和Web上面一直的设计方案，我们通过嵌套包裹的方案，相同的属性的文本可以用父标签进行包裹，然后内部特殊的文本采用子标签方案，具体例子如下:

I am bold and red

具体运行效果如下:

文章图片

【React|【React Native开发】React Native控件之Text组件讲解(9)】我们看到整体字体格式为bold以及字体大小为28，不过后边的'and red'的字体颜色为红色。
5.2.容器布局规则
之前我们介绍View组件，我们知道该组件是支持FlexBox(弹性布局),但是Text组件直接是文本布局的，也就是说一个Text接着Text，横向，如果文本已经到末尾了，那就直接换行。
我们来看一下具体实例代码:

One Test Second Test

运行截图如下:

文章图片

这样我们可以看到两个Text直接横向排布，第二个Text直接接在第一个Text后面了。但是如果该父控件采用View，View是支持FlexBox布局的，具体看如下实例代码:

First part and second part

默认垂直分布,运行结果如下:

文章图片

5.3.样式继承规格
从以上一些例子中我们也发现了，组件可以嵌套，而且样式还支持继承，也就说父组件定义了相关样式，如果子组件没有重写样式的话，那么该子组件会继承父组件定义的样式。
(六)Text实例下面使用以上一些属性和相关样式来演示一下实例:

/** *Text组件实例演示 * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React =require('react-native'); var { AppRegistry, Text, View, StyleSheet, } = React; var TestText =React.createClass({ render: function() { return ( My Text One红色。 My Text Two 绿色和字体大小。 My Text Three 绿色和字体名称。 My Text Four 粉色和加粗。 My Text Five 灰色和斜体。 My Text Six 居中和斜体。测试行数My Text Six 居中和斜体。My Text Six 居中和斜体。 My Text Six 居中和斜体。设置文本的间距,居左，居顶部50 测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高测试行高 ); } }); AppRegistry.registerComponent('TestText',() => TestText);

具体运行截图如下:

文章图片

(七)最后总结今天我们主要给大家介绍Text组件的相关属性和样式的基本使用方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq）侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)