React Native控件之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组件的属性方法。

属性方法

在这里我只是举出一些比较常用的属性方法，只是起到抛砖引玉的作用，如果要了解更多的知识可以查看官方网址。

风格样式——Style标签

Text组件可以使用View组件所有的Style，View组件的所有Style可以查看官方文档View的Style汇总