React Native控件之Text组件介绍

React Native控件之Text组件介绍

（一）前言

前面在讲解View视图的时候，我们使用过Text组件，这篇文章详细的来介绍一下Text组件。

（二）基本用法

Text组件是React中的一个基本组件，这个和iOS上的UILabel与Android上的TextView组件相类似，就是用来显示文本的，这个空间除了基本的显示布局之外，可以嵌套使用，设置样式，添加事件处理功能。下面我们给出一个简答的例子：

'use strict'
import React, { Component } from 'react';
import  {
   AppRegistry,
   StyleSheet,
   Text,
   View
} from 'react-native'
var PerfectProject = React.createClass({
    render: function(){
       return (
           <Text style={styles.outerText}>I am learning React Native!
              <Text style={styles.innerText}>Please study hard!
              </Text>
           </Text>
       );
    },
});
var styles = StyleSheet.create({
  outerText:{
    margin:40,
    textAlign:'center',
    color:'red',
    fontSize:28,
    fontFamily:'Cochin'
  },
  innerText: {
    color:'green',
    fontWeight:'bold',
  },
});
AppRegistry.registerComponent('PerfectProject',() => PerfectProject);

上面是Text组件中嵌套另一个Text组件，用StyleSheet方法定义它们的演示。
运行效果如下：

【注意】这一点我们需要特别注意，如果内部Text组件没有定义自己的样式，那么内部Text组件会继承外部组件的样式，哪一项自己没有定义，就要继承哪一项。

上面我们使用了margin、textAlign、color、fontSize、fontFamily、fontWeight样式，接下来，我们总结一些Text组件的属性方法。

（三）属性方法

名称	类型	属性还是方法	作用	平台
allowFontScaling	bool	属性	控制字体文本是否根据iOS的设置进行自动缩放	iOS平台，Android平台不适用
numberOfLines	number	属性	设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了。	全平台
onLayout	function	方法	当布局发生变动时自动触发该方法，其中function的参数如下：{nativeEvent: {layout: {x, y, width, height}}}	全平台
onLongPress