在React Native中,你并不需要學習什么特殊的語法來定義樣式。我們仍然是使用JavaScript來寫樣式。所有的核心組件都接受名為style的屬性。這些樣式名基本上是遵循了web上的CSS的命名,只是按照JS的語法要求使用了駝峰命名法,例如將background-color改為backgroundColor。
style屬性可以是一個普通的JavaScript對象。這是最簡單的用法,因而在示例代碼中很常見。你還可以傳入一個數組——在數組中位置居后的樣式對象比居前的優先級更高,這樣你可以間接實現樣式的繼承。
實際開發中組件的樣式會越來越復雜,我們建議使用StyleSheet.create來集中定義組件的樣式。這里我就只用簡單介紹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'
// 橫線風格
textDecorationStyle:'dotted',//'solid', 'double', 'dotted', 'dashed'
// 線的顏色
textDecorationColor:'black',
/***
* allowFontScaling:控制字體是否要根據iOS的“文本大小”輔助選項來進行縮放
* adjustsFontSizeToFit:指定字體是否隨著給定樣式的限制而自動縮放
* minimumFontScale:當adjustsFontSizeToFit開啟時,指定最小的縮放比(即不能低于這個值)??稍O定的值為0.01 - 1.0
* suppressHighlighting:當為true時,如果文本被按下,則沒有任何視覺效果。默認情況下,文本被按下時會有一個灰色的、橢圓形的高光
*/
},
文件回調函數
<Text style={styles.fontStyle} onPress={()=>{alert('onPress')}}>3,當文本發生點擊的時候調用該方法</Text>
<Text style={styles.fontStyle} onLongPress={()=>{alert('onLongPress')}}>4,當文本被長按以后調用此回調函數</Text>