標籤:
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:1833 }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文法