标签：
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/
【React Native开发】React Native控件之Text组件讲解-es6语法
标签：
原文地址：http://www.cnblogs.com/zimengfang/p/5689945.html
