【React Native开发】React Native控件之Text组件讲解-es6语法

Text组件为React中一个基本组件，和Android中的TextView组件相类似用来显示基本的文本信息，该控件除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件(例如:点击)处理。下面我们来一个实例:

 1 import React, {Component} from ‘react‘;
 2 import {
 3     AppRegistry,
 4     StyleSheet,
 5     Text
 6 } from ‘react-native‘;
 7
 8 class AndroidWdd03 extends Component {
 9     render() {
10         return (
11             <Text style={styles.father}>
12                 父文本
13                 <Text style={styles.son}>
14                     子文本
15                 </Text>
16             </Text>
17         );
18     }
19 }
20
21 const styles = StyleSheet.create({
22     father: {
23         margin: 10,
24         textAlign: ‘center‘,
25         color: ‘red‘,
26         fontSize: 24,
27         fontFamily: ‘Cochin‘
28     },
29     son: {
30         color: ‘green‘,
31         fontWeight: ‘bold‘,
32         fontSize:18
33     }
34 });
35
36 AppRegistry.registerComponent(‘AndroidWdd03‘, () => AndroidWdd03);

上述实例采用Text的嵌套方式，最外层的Text的Style father定义相关风格，内层的风格style定义相关风格，我们可以看到运行效果，如果内层没有重写外层定义的样式，那么内层会进行继承。如果重写了样式，那么内层会根据自己定义的样式进行渲染，该和CSS样式表差不多。

上面例子主要定义了布局，字体大小，字体风格，颜色等相关样式

参照:http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Btext%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A3/