一、什么是Text組件?
一個用于顯示文本的React組件,和Android中的TextView組件或者OC中的Label組件相類似,專門用來顯示基本的文本信息;除了基本的顯示布局之外,可以進行嵌套顯示,設置樣式,以及可以做事件(例如:點擊)處理;
二、Text組件常用的屬性方法
(1) color string ** 字體顏色
(2)containerBackgroundColor string
(3)fontFamily string ** 字體名稱
(4)fontSize number ** 字體大小
(5)fontStyle enum('normal', 'italic') ** 字體風格(normal,italic) 斜體只適用于英文
(6)fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') ** 字體粗細權重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
(7) lineHeight number ** 行高
(8)textAlign enum("auto", 'left', 'right', 'center') ** 文本對其方式("auto", 'left', 'right', 'center', 'justify')
(9)writingDirection enum("auto", 'ltr', 'rtl') ** 文本方向("auto", 'ltr', 'rtl')
(10)numberOfLines number ** 進行設置Text顯示文本的行數,如果顯示的內容超過了行數,默認其他多余的信息就不會顯示了 (RN中不可用)
(11)onPress fcuntion ** 該方法當文本發生點擊的時候調用該方法
(12)textShadowOffset ** 設置陰影效果{width: number, height: number}
(13)textShadowRadius ** 陰影效果圓角
(14)textShadowColor ** 陰影效果的顏色
(15)letterSpacing ** 字符間距
(16)textDecorationLine ** 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
(17)textDecorationStyle ** 線的風格("solid", 'double', 'dotted', 'dashed')
(18)textDecorationColor ** 線的顏色
三、Text組件中常用屬性的應用
export default class AHelloProject extends Component {
render() {
return (
<View style={{marginTop: 50}}>
<Text style={styles.textStyle}>
這是Text組件常用屬性的應用示例,{'\n'}
<Text style={{backgroundColor: 'green',color: 'purple'}}>
我是繼承的Text
</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
textStyle: {
color: 'red',
backgroundColor: 'blue',
fontFamily: 'Times',
fontSize: 25,
fontStyle: 'italic',
fontWeight: 'bold',
lineHeight: 40,
textAlign: 'center',
writingDirection: 'rtl',
letterSpacing: 5,
textDecorationLine: 'underline line-through',
textDecorationStyle: 'solid',
textDecorationColor: 'yellow',
textShadowOffset: {width: 10, height: 10},
textShadowRadius: 5,
textShadowColor: 'black'
},
});
效果圖.png
四、Text組件中樣式的繼承
在React-native中是沒有樣式繼承這種說法的, 但是對于Text元素里邊的Text元素,其實是能夠繼承的,那么是單層繼承還是多層繼承?
由上邊的例子可以看出:<strong>文字控制類的屬性也是多重繼承的,和css中是一樣的</strong>