在React Native中烁涌,你并不需要學(xué)習(xí)什么特殊的語(yǔ)法來(lái)定義樣式。我們?nèi)匀皇鞘褂肑avaScript來(lái)寫樣式诵冒。所有的核心組件都接受名為style的屬性。這些樣式名基本上是遵循了web上的CSS的命名,只是按照J(rèn)S的語(yǔ)法要求使用了駝峰命名法允懂,例如將background-color改為backgroundColor。
style屬性可以是一個(gè)普通的JavaScript對(duì)象衩匣。這是最簡(jiǎn)單的用法蕾总,因而在示例代碼中很常見酣倾。你還可以傳入一個(gè)數(shù)組——在數(shù)組中位置居后的樣式對(duì)象比居前的優(yōu)先級(jí)更高,這樣你可以間接實(shí)現(xiàn)樣式的繼承谤专。
實(shí)際開發(fā)中組件的樣式會(huì)越來(lái)越復(fù)雜躁锡,我們建議使用StyleSheet.create來(lái)集中定義組件的樣式。這里我就只用簡(jiǎn)單介紹TEXT的常見樣式用法:
<Text style={styles.fontStyle}>1,字體樣式fontStyle</Text>
使用 const styles = StyleSheet.create
fontStyle: {
color:'red',
textAlign:'left',
fontSize:22,
fontFamily:'Cochin',
fontWeight:'bold',
// 陰影
// textShadowOffset:{width:3, height:5},
// 陰影顏色
// textShadowColor:'black',
// 字符間距
letterSpacing:5,
// 行高
lineHeight:35,
// 橫線
textDecorationLine:'none',//'none', 'underline', 'line-through'
// 橫線風(fēng)格
textDecorationStyle:'dotted',//'solid', 'double', 'dotted', 'dashed'
// 線的顏色
textDecorationColor:'black',
/***
* allowFontScaling:控制字體是否要根據(jù)iOS的“文本大小”輔助選項(xiàng)來(lái)進(jìn)行縮放
* adjustsFontSizeToFit:指定字體是否隨著給定樣式的限制而自動(dòng)縮放
* minimumFontScale:當(dāng)adjustsFontSizeToFit開啟時(shí)置侍,指定最小的縮放比(即不能低于這個(gè)值)映之。可設(shè)定的值為0.01 - 1.0
* suppressHighlighting:當(dāng)為true時(shí)蜡坊,如果文本被按下杠输,則沒有任何視覺效果。默認(rèn)情況下秕衙,文本被按下時(shí)會(huì)有一個(gè)灰色的蠢甲、橢圓形的高光
*/
},
文件回調(diào)函數(shù)
<Text style={styles.fontStyle} onPress={()=>{alert('onPress')}}>3,當(dāng)文本發(fā)生點(diǎn)擊的時(shí)候調(diào)用該方法</Text>
<Text style={styles.fontStyle} onLongPress={()=>{alert('onLongPress')}}>4,當(dāng)文本被長(zhǎng)按以后調(diào)用此回調(diào)函數(shù)</Text>